#WebSafe Font Picker

[gonzopressious-blog]

Pick Your Custom Webfont

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. It is the intended result of the complete process of presentation of textual material in order to communicate meaning as unambiguously as possible.

Out of the box, systemfonts are already installed in this Theme. If you don't pick any WebSafe Fonts in the 'edit appearance' > 'Edit Theme' Dashboard, import Google Fonts nor set TypeKit, your blog typography will look great!

Adding a custom font to your Tumblr theme

It is understandable that, for one reason or another, your project needs a font that is not available by default within this theme – whether it's for branding reasons, or your own aesthetic choices.

Tumblr's Websafe Fontpicker

Tumblr provides a set of web-safe fonts that users can select from. I've included special meta font tags in this theme, so you can easily change fonts using your Customize page. You can choose a web-safe font for your body text as well as your heading tags (h1, h2, h3).

Import Google Webfonts

You can also import Google Web Fonts. There are a few steps, but it will let you override all the fonts. For my example, I will use the font Open Sans (To use a Google font, first find the font you wish to use from their font library, click the ‘Quick-use’ button, and copy the code).

In your Customize page, you can add some custom CSS styles, by clicking the 'Advanced options' button at the bottom of the main menu. In the Advanced Option menu you can see the section 'ADD CUSTOM CSS' where you can copy/paste your custom CSS styles

@import url(http://fonts.googleapis.com/css?family=Open+Sans); /* CHANGE ONLY BODY TEXT FONT */ body { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT H1, H2, H3 HEADING TAGS */ h1,h2,h3 { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT HEADER TITLE */ #title h1, #title h1 a { font-family: 'Open Sans', sans-serif; } /* CHANGE ALL FONTS IN THEME */ * { font-family: 'Open Sans', sans-serif; }

Typekit

Typekit is a great service that lets you choose one of their many neat fonts and apply them to your blog or website. Their trial account type lets you use their service forever, but limits how many fonts are available to you and how many websites you can use them with. They have great documentation and make the process super easy.

Changing Font-size of the Title

The font-size of the title (the Blogname) can be adjusted as well, it all depends on the amount of characters that your Blogname will have. I've set up an default font-size best for 12-15 characters.

If you have more characters you might want to change the default font-size .. place this piece of code in the section 'ADD CUSTOM CSS' and change the font-size to what 'fits' best!

[gonzolicious]

Pick Your Custom Webfont

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. It is the intended result of the complete process of presentation of textual material in order to communicate meaning as unambiguously as possible.

Adding a custom font to your Tumblr theme

It is understandable that, for one reason or another, your project needs a font that is not available by default within this theme – whether it's for branding reasons, or your own aesthetic choices.

Tumblr's Websafe Fontpicker

Tumblr provides a set of web-safe fonts that users can select from. I've included special meta font tags in this theme, so you can easily change fonts using your Customize page. You can choose a web-safe font for your body text as well as your heading tags (h1, h2, h3).

Import Google Webfonts

You can also import Google Web Fonts. There are a few steps, but it will let you override all the fonts. For my example, I will use the font Open Sans (To use a Google font, first find the font you wish to use from their font library, click the ‘Quick-use’ button, and copy the code).

In your Customize page, you can add some custom CSS styles, by clicking the 'Advanced options' button at the bottom of the main menu. In the Advanced Option menu you can see the section 'ADD CUSTOM CSS' where you can copy/paste your custom CSS styles

@import url(http://fonts.googleapis.com/css?family=Open+Sans); /* CHANGE ONLY BODY TEXT FONT */ body { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT H1, H2, H3 HEADING TAGS */ h1,h2,h3 { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT HEADER TITLE */ #title h1, #title h1 a { font-family: 'Open Sans', sans-serif; } /* CHANGE ALL FONTS IN THEME */ * { font-family: 'Open Sans', sans-serif; }

Typekit

Typekit is a great service that lets you choose one of their many neat fonts and apply them to your blog or website. Their trial account type lets you use their service forever, but limits how many fonts are available to you and how many websites you can use them with. They have great documentation and make the process super easy.

Changing Font-size of the Title

The font-size of the title (the Blogname) can be adjusted as well, it all depends on the amount of characters that your Blogname will have. I've set up an default font-size best for 12-15 characters.

If you have more characters you might want to change the default font-size .. place this piece of code in the section 'ADD CUSTOM CSS' and change the font-size to what 'fits' best!

#title h1, #title h1 a { font-size: 1.5em; }