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.

1 Comment →

Common Blog Mistakes You Should Avoid

With today’s tools, it can be fairly easy to launch your own blog. Many of these tools – whether it’s Blogger, WordPress, or another platform offer several options for new bloggers to create and customize colors, fonts, and various other aspects of their blogs. Here, we’d like to address a few of the common blog […]

Leave a Comment →

How to Move your WordPress Site or Blog from a Folder or Temp Folder to the Root Directory

Sometimes you might have your WordPress blog installed in a folder on your site. This could be intentional, like this blog is in the “blog” folder under Creative Patience, or accidental if you happened to type in a folder name when you installed WordPress through a cPanel. When building out new websites for a client, […]

Leave a Comment →

How to Customize Your Search Input Box and Search Button

To customize your search box, open searchform.php. If you do not have a searchform.php, WordPress is using it’s built in search form, which you can customize but it might not be as flexible. I’d recommend that you create your own searchform.php so we can customize as needed. In searchform.php, we’ll have something that looks like […]

Leave a Comment →