So you want to spiff up your theme by using fancy fonts? This tutorial will show you how! Just a quick note before we continue though - unfortunately because Firefox is fickle, custom fonts (not google fonts) will not work on Firefox. For some reason fonts have to be uploaded to the same site server - so yes, even if you host it via the static tumblr uploader, it will not work. Custom fonts (not including google fonts) will only work on Chrome and possibly IE (I honestly don’t want to bother to check.) That being said on with the tutorial!
Step 01 - Finding Your Fonts
Make sure you know where your fonts are that you want to use. This means locating your fonts folder on your computer as you’ll need to upload it to an outside source. As I said earlier - you can use the tumblr static file uploader - but other sites would be like box.com and webs.com.
While you can still install custom fonts, I would recommend either sticking to Google Fonts or at least having a font back up for Firefox.
a. Google Fonts
It’s a pretty easy set up for Google Fonts. You simply find a font that you like click “Quick Use” and then it provides directions for you. The only draw back is that there only a small array of fonts to use, not like what you might have in your own font folder.
Step 02 - Custom Fonts Code
So below you’ll find the custom font code you’ll need to install. You don’t need to use all the lines but it is important across browsers.
You’ll want to replace “Some Font Name” with what you want to call the font. This will be used later in the CSS. You’ll also want to replace “host.com/somefontname.xyz” with your hosted font.
The EOT font file is only for Internet Explorer. So if you want to appeal to people who have Internet Explorer - bless their souls - you’ll have to find that file. If not this is all really required of you:
One of the most important things I’ve learned from researching typography during my digital art class is this: font design is hard as balls, and if any of those designers saw the way I’ve superimposed their hard work across Batman’s face in a less-than-skilled-manner, they would probably cry. The links in this post should cover all the fonts I’ve used in past graphics and any future graphics.
Just a friendly reminder: graphics are like evolution—sometimes you throw a bunch of cool shit together and get something awesome like a platypus, and other times you get an ugly slimy blind undersea creature that eats poop. Using a good font doesn’t necessarily mean you will get a platypus.