How to Add Custom Fonts to Your Blog Using Google Web Fonts

If you want to add a little bit of personality, consider using a custom font on your blog. One easy way to add a custom font is to use a Google Web Font.

You can see all of the available Google Web Fonts in the Google Fonts Directory. There are over 150 different fonts currently available, ranging from serif to sans serif to scripts.

Google Fonts

Once you find the font you like, click on the font and it will take you to a Google web fonts page that gives you a preview of the font, shows you the character set, and a link to download the font (which is great for designers who need to use sample fonts in web layouts.)

Click on the “Use this font” link and the page will show you two bits of code. The first item is a <link> tag that should be inserted inside the <head> tags of your site. For example:

Source code    
<head>
...
<link href='http://fonts.googleapis.com/css?family=Rokkitt&v1' rel='stylesheet' type='text/css'>
...
</head>

After you have add the link to the font stylesheet, you need to customize your own stylesheet (usually style.css) to call the new font. Any place you want to use the custom font, you will use “font-family: ‘font name’;” It’s good practice to provide alternate fonts in case there is something wrong with your first font choice, so “font-family: ‘font name’, arial, san-serif;” is a good choice. As an example, if I want the entire site to use the custom font ‘Rokkit’, then I would use the code:

Source code    
body {
  font-family: 'Rokkit', arial, sans-serif;
}

Save your stylesheet and you’re done! You’ve just installed a custom font to your blog.

One Comments to “How to Add Custom Fonts to Your Blog Using Google Web Fonts”

  1. Kathrine says:

    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

Leave a Comment