How Do People Have Cool Fonts on Tumblr?
By Randall Blackburn
If you use Tumblr, you have probably seen blogs with cool fonts and effects. You can get cool fonts on your Tumblr blog in two ways. Either install a theme that includes the fonts you like, or insert some code into the HTML theme that references the cool font you want to use. After inserting the reference, edit the “font-family” attribute for each theme element to modify.
Tumblr Themes
Select from hundreds of free and for-fee themes right from the Tumblr Customize menu. Open the dashboard for the blog to modify, then click the “Customize” tab to open the theme in Edit mode with the Customize panel in the left sidebar. Click the “Browse Themes” link to open the Theme Garden. Click the down arrow to limit your search to specific categories, such as “Minimal.” You can also search for a specific theme name by clicking the Search icon, then typing the name of the theme in the Search box.
When you locate a theme you like, click the theme, then click “Use” in the Customize panel to assign the theme to your blog. Preview the theme in the Preview pane, then click “Save” to save the modifications.
Custom Themes
If you are an experienced coder, you can create your own custom HTML themes for your Tumblr blog. Tumblr provides a guide for creating your own custom theme (link in Resources). Design your theme with the fonts you wish, then apply the theme to your Tumblr blog. Open the blog theme in Edit mode with the Customize panel displayed in the right sidebar. Click “Edit HTML” to open the HTML editor, then select and delete all HTML code. Paste your custom code in the HTML editor window, then save your changes.
If you need to revert to an earlier version of your theme or return to the original Tumblr theme, open the Tumblr Theme Recovery tool in a browser (see Resources), then click “Revert” next to the theme version to restore.
Edit Font Family
You can edit the “font-family” attribute for each theme element to change. Open the theme in Edit mode with the Customize menu visible, then click the “Edit HTML” link. Press “Ctrl-F” to open the Find and Replace dialog box in the editor. Type “font-family” in the Find box to locate each instance of the “font-family” attribute. Edit the name of the font family for each theme element to modify. For example, to change the font for your blog’s title, locate the ”font-family“.attribute for the “.blogtitle” variable. Edit the font family to your specifications. Click “Update Preview” to see your changes in the Preview pane before saving. Click “Save” to save the changes.
Custom Fonts
Install a custom font that is not necessarily supported on the Tumblr platform by including a reference to the font between the <head> and </head> tags. Google offers Google Fonts, a service that hosts fonts you can hotlink to from your theme. Using hosted fonts, such as those available from Google Fonts, enables you to link to fonts that are not available on the Tumblr platform. When you link to a hosted font, the font source is located on the hosted server.
To use Google Fonts or a similar hosted font site, open the site in a browser and choose the font you want to use on your blog. Generate the HTML reference code for the font. To generate the code widget in the Google Fonts site, click the “Quick Use” button for the selected font. Copy the code to your clipboard.
The line of HTML code will appear similar to:
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
Insert the above reference in the <head> section of your theme. Take note the value of the “family=” attribute, as this is the value you will use to replace the existing font-family entries. In the case of the example above, you would change all of the desired “font-family” instances to “Audiowide” in your Tumblr theme. Save the theme, then close the editor.
Considerations
The Tumblr supports font modifications in themes, however, you cannot use different fonts in Tumblr posts.The Tumblr platform strips out most HTML and CSS code from posts before publishing. You can edit the “font-family” attribute for the Post variables in the theme, which will change all text in all of your posts to the desired font family.
References
Writer Bio
Randall Blackburn has worked for several Fortune 1000 companies as a technical writer over the past seven years. He has produced a wide variety of technical documentation, including detailed programming specifications and research papers. Randall has also acquired several years' experience writing web content. Randall lives and works in Austin, TX.