Adding a custom font to your Tumblr them

Many Tumblr themes come with pre-packaged fonts that the theme's creator thought would look best with the theme. Although this is the case, it is understandable that, for one reason or another, your project needs a font that is not available within the theme – whether it's for branding reasons, or your own aesthetic choices. If you need a custom font, you can easily set them up using a web font service like Typekit or Google Fonts.

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.

Google Fonts

You can also import Google Web Fonts. There are a few steps, but it will let you override the all the theme’s 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, which looks like an arrow pointing to the right. Next, scroll to 3. Add this code to your website and click the @import tab and copy the CSS code that appears and paste it somewhere where you can get it later. It should look like this:

@import url(<a href="http://fonts.googleapis.com/css?family=Open" target="_blank">http://fonts.googleapis.com/css?family=Open</a>+Sans);

Then you can scroll to 4. Integrate the fonts into your CSS and copy the code you see there and paste it with your @import CSS. It will look like this:

font-family: 'Open Sans', sans-serif;

Go to your Tumblr and click Customize once you’ve chosen the blog you wish you change. Scroll to the bottom of your Theme Options and click the Advanced Options link. At the bottom you will find the Add Custom CSS box. You can now paste the CSS code you got from Google Fonts into that box, but you need to change one thing. Put the font-family code inside of a pair of curly brackets, and place an asterisk (*) at the beginning of the line. The asterisk tells web browsers that all the elements on the page that require a font-family to use the one that you provide in that line. The contents of your Add Custom CSS box should like like this:

@import url(<a href="http://fonts.googleapis.com/css?family=Open" target="_blank">http://fonts.googleapis.com/css?family=Open</a>+Sans);
* { font-family: 'Open Sans', sans-serif; }

You can also use any of these web-safe fonts without an @import statment by just putting their name inside the single-quotes where Open Sans is in my example. The new font might not immediately appear in your Tumblr’s preview, so save your changes and reload the page. Remember to double-check that everything looks good