Nerd Party: How to Use Custom Fonts
Jessica posted this question a few days ago on Twitter…
So today I’m going to teach you how to add custom fonts to your blog from the Google Font Directory.
BLOGGER
There are two ways to use custom fonts in Blogger. First, since Blogger is owned by Google, they have custom fonts already available in the Template Designer. Choose the text you want to change, choose the font, BAM, DONE!
But, if you’re adventurous and are looking to add fonts into the stylesheet yourself, here’s how…
1. Choose your font from google.com/webfonts/
2. Click ‘quick use’ if you are just using one font or ‘add to collection’ if you’re using more than one.
3. Next you will get two pieces of code…
font-family: ‘Delius’, cursive;
font-color: #555555;
letter-spacing: 1px;
font-size:1.3em;
}
SELF-HOSTED WORDPRESS
Adding custom fonts to WordPress works in the same way. You will add the first piece of code between the head tags in your header file (WordPress does not require that extra slash at the end) and the second piece of code goes into your stylesheet.
PLEASE NOTE: I’m happy to provide instructions, but due to my busy schedule I am not available for tech help. So, if you are new to coding, please make sure to save your template files before trying tutorials :)
CLICK HERE TO SUBMIT A QUESTION & READ MORE POSTS
08.28.12 in nerd party
I got the first part, where you put the fonts in, but I don’t understand where the second piece of code goes. I tried putting it in right after the first piece but the code text just shows up at the top. I tried putting it between the skin tags but I can’t figure out what to change.
I’m new at this stuff, but I’m trying to learn :)
It depends on what class you are trying to style. It may not be an H2 – it may be post-title or date-header. You’ll want to add the font-family line into whatever you’re trying to style.
Hello! I didn’t see the font I wanted to use on Google Web Fonts; so, I ended up buying the font for $30 and I bought the ‘Web Fonts’ type so I am able to use it on my website. I chose http://www.TypeFront.com to host my font. From this point forward I have absolutely no idea what to do! If you’re familiar with any of this I’d take any help I can get!
Thanks for your post! x
If you check out their site they have a pretty good tutorial. Essentially you download the font (which probably has directions in it also), upload the fonts folder to your website through an FTP program like Fetch or through your hosting company, and then add a little piece of code into your header template file. Then add the font to your stylesheet.
What if I want to change the font only in my posts and not in my header? Is there a way to do that?
Can you use these fonts actually within the posts themselves or just on the outer template?
Thanks for the awesome tutorial by the way! My header looks way better now!
You can – you’ll add the font into the code for your header so your site knows you’ll be using it. Then use a font tag (http://www.w3schools.com/tags/tag_font.asp) around the text you want to change. Be careful though – too many fonts can make a blog look messy, so I’d recommend only making your post text larger, smaller, bold or italic.
Hi….one of the main problem I’ve noticed using custom fonts in Blogger is that they’re nearly the last thing that the page loads….so they look awful for a couple of second…and sometimes do not load at all!
Hey Paola – I’ve noticed this problem on a few sites. A couple things that will help – putting the API link right after the opening tag (which will cause it to load ahead of everything else), putting all your font requests in one tag, and speeding up the load time on the rest of your site. Lots more information here if you’re in for a nerdy read: http://googlewebfonts.blogspot.com/2010/09/optimizing-use-of-google-font-api.html
Neat! This is helpful. Is it true that some of these fonts might not work on some computers depending on what other people have for browsers/OSs?
Good question! I haven’t found a case of any fonts not working, but they definitely look slightly different depending on the system and browser. Some fonts look a little scrunched and might display slightly smaller and be difficult to read. So it’s always a good idea to check your site in multiple browsers and if you don’t have access to MAC or Windows, have a friend send you a screen shot so you can make sure your it looks great for everyone who visits.