lmthemes:

Tutorial 03 - Installing Custom Fonts | Beginner

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.

@font-face {font-family: 'Some Font Name';
    src: url('http://host.com/somefontname.eot'), 
         url('http://host.com/somefontname.eot?#iefix') format('embedded-opentype'),
         url('http://host.com/somefontname.woff'),
         url('http://host.com/somefontname.ttf') format("truetype"),
    font-weight: normal;
    font-style: normal;}

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:

@font-face {font-family: 'Some Font Name';
    src: url('http://host.com/somefontname.ttf') format("truetype"),
    font-weight: normal;
    font-style: normal;}

Of course you can change the font-weight and font-style to what you prefer!

Step 03 - Using the Fonts

Now when you go to use the fonts in your CSS you’ll do something along the lines of:

.class {font-family: 'Some Font Name', 'Google Font Backup';}

Save your theme and ta da you have installed a custom font!