Posted In Internet

Use Google Font Directory Fonts in WordPress

Google has some seriously nice looking fonts available for you to use for free in the Google Font Directory. All the fonts are under an open source license and are served right from Google servers.

Most modern web browsers support webfonts. The Google Font API FAQ would be a good place to visit if you have questions or are curious about some of the limitations.

Making use of these fonts in your WordPress theme is extremely easy, as long as you have a basic understanding of CSS. Now let’s get down to using these in your WordPress theme, we’ll keep it short and simple.

First, head over to the Google Font Directory and pick a font to use. I’ll be using IM Fell as an example, since that’s the font I use for post titles on this site.

Once you find a font you like, click on it. If the font you chose has variants, you will need to click on a variant to use. Once you’re on the font page, click the “Get the code” tab and google will generate the code for the font. You will embed this code in the header.php file for your theme. I usually put it right before the line that calls the theme stylesheet file. Here’s the code I used to include the IM Fell font:

After that, all you have to do is use the font in your CSS, typically the style.css file in your WordPress theme directory. To get my post titles to use the IM Fell font, I did this:

The font-size property defines what size of font to use (duh!). The font-weight property defines the thickness of the font (degree of boldness). You can apply the font-family property using the Google Font to pretty much any piece of CSS that targets text. You can use it for post content, links, widget titles, or whatever you want really.

If you have any questions, feel free to leave a comment and I’ll do my best to help you out!

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. :) is proudly hosted by DigitalOcean

About these ads
  • moby

    thanks for this really appreciate it, i wish to apply it to my joomla themes – it will be a similar process i’m guessing?

    • Yup, similar process in Joomla, probably almost identical.

  • great post Tyler might just try this out myself, although I can imagine its not for the nervous coder and a bit of css knowledge is needed!
    Thanks for sharing buddy! btw seems this theme is a popular one i see it in lots of other blogs!
    Am thinking of making a bespoke one for myself from scratch! thanks for the inspireation buddy!

    Kindest Regards
    -Phillip Dews

    • Hi Phil,

      It’s actually pretty easy to use Google fonts on a website (not just wordpress sites).

      Just a matter of deciding which font to use, adding a line of code to your head and specifying the font in CSS.