How To Add Custom Fonts To Your Website

When I read a webpage, an interesting font almost helps draw me in to the page. I don’t know what it is. Princeton scientists have found that harder to read fonts can boost learning, so maybe thats why I take in more at these sites. AListApart, ILoveTypography, and NewYorker use fonts in interesting ways to keep me engaged.

Does that make me weird? Or does everyone feel that way? The problem is that the standard fonts available to most browsers is a bit limited. Until recently, I thought the only way around this problem was using the services of TypeKit. After you insert a special script tag into your website’s header, you have access to an enormous library of interesting fonts. And those fonts will look the same on any browser too. But that freedom and creativity comes at a cost.

If you are happy with just 2 fonts, then that cost is nothing, but to go crazy you are looking at 100 bucks per year. I tried it for a while and had fun with it too, but then I stopped. I’m not sure why, I just went back to the standard fonts. But this morning I decided I wanted to see a change in style on the technovangelist.

Screen shot 2011 03 06 at 11 50 46 AM

This time I looked into a new service offered by Google. Google WebFonts to be precise. Now you’re probably wondering why Google is into typography. After all, their main website (You don’t need me to link to that, do you?) is pretty bare. But they keep expanding into new and interesting areas and this seems to be inline with their free website hosting at Google Sites, free blog hosting at blogger.com, and free web application hosting with Google App Engine. And like those services, Google WebFonts is also free. The number of fonts available doesn’t match the more established TypeKit, but they seem to be adding new fonts every month or so.

So how do you use Google WebFonts? Well, I guess there are a few steps. First look through the directory of fonts and choose something you like. Click on the font to get a more detailed preview of the font. Then click the Use This Font link. Here you get a simple set of instructions for including this in your site. It basically comes down to adding a link tag to your header, then adding some custom CSS.

Screen shot 2011 03 06 at 11 46 51 AM

I use Squarespace, so in the website management panel, click on Website Settings under Structure. Then go to Code Injection and find the Extra Header Code. This is where I already have codes for Woopra and Google Analytics. If you just pasted the link line from the WebFonts site into this area, Squarespace will have a problem with it, so change the > at the end to a /> and all will be good. Now edit your CSS and you have custom fonts.

It works like magic!!

1 Comment

  1. Thank you so much for the post.

    Read 2-3 articles to use custom fonts for my blog but ended up unsuccessful.

    After reading this post I solved the problem. Cheers.

    Thanks.

    Kathrine

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *