Use Google Fonts on your WordPress blog

If you’d like to use custom fonts on your blog, but are restricted by the limited themes and lack of editing capabilities, the easiest way is to use Google Webfonts. This tutorial will show you how to embed the fonts directly into your stylesheet.

Please refer to my “Add CSS to your theme” tutorial before using this tutorial.

  1. Go to the Google Webfont Directory and find the font you would like to use.

  2. Click the Quick-use button. Make sure the font styles you would like to use are selected.

  3. Scroll down to where the page says “3. Add this code to your website:“. Click theĀ @import tab and copy the code that pops up.

  4. Paste this into the forms stylesheet you created following theĀ “Add CSS to your theme” tutorial.

  5. Underneath, use the font to style your theme!

    If I was using Montserrat in bold for my titles:

    <style type="text/css">
    	@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
    	.entry-title{font-family:"Montserrat",sans-serif}
    </style>

    If I was using Asap for my body text:

    <style type="text/css">
    	@import url(http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic);
    	body{font-family:"Asap",sans-serif}
    </style>
  6. After you’re finished, update your form.

You should now have custom fonts on your site!

Leave a Reply

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