How to add Google Fonts to your WordPress theme

30
Jul

The Google Fonts directory is one of the most exciting developments in web typography to come about it recent time. Google Fonts allows us as blog developers and users to use exotic eye catching fonts in our WordPress themes.Previously it has been possible to use a handful of bold exotic fonts in our themes but it required tonnes of JavaScript code which put a heavy burden on our bandwidth and page loading times. The new service offered by Google Fonts has come along and saved us once again.

How to add Google Fonts to your WordPress theme

What are Google Fonts and how easy are they to use?

Google Fonts are a collection of hundreds of free, open-source fonts optimized for the web

Google web fonts is a project to ensure webmaster, designers and developers have free and easy access to a choice of rich, free, quality typography for their websites.

All the Google web fonts are open source. That means that you are free to to use them in any way you want, independent of whether you’re working on a private or commercial project. The API serving Google web fonts is built on Google infrastructure that is fast, reliable and tested. We provide the service free of charge.

The Google Fonts team are working with many type designers to fill the directory with quality font faces that are optimized for usage on the web. If you want to contribute please get in touch. Popular Google web fonts can been seen on millions of web sites.

According to The Google Font website: There are  just 3 quick steps between you and a good lookin’ website

  1. Choose: Search or browse hundreds of font families, then add the ones you like to your Collection.
  2. Review: Compare and refine your Collection, even see the styles in a dynamic sample layout.
  3. Use: Grab the code we prepare and you’re ready to add the Collection to your website!

At the time of this article there are currently 214 open source free Google fonts for us to use and are on the rise. Google has create an outstanding website for us to be able to easily browse through the collection of these fonts. It is styled and designed remarkably so they we can preview many fonts at once.

All fonts in the Google font directory are available for use on your website under an open source license and are served by Google servers. This is a big winner in terms of bandwidth usage and page loading speed as it shifts the weight of the resources from our servers over to the Google servers, and we know the Google servers are fast!

In this article I am going to demonstrate a few options and methods you have for using and integrating Google Fonts in your WordPress themes.

How to manually add Google Fonts to our WordPress themes

In the first part of the article I am going to show to manually ad the code ( Cascading Style Sheet references and CSS styles ) to your WordPress themes.

  1. First of all visit the Google Fonts Directory and find the font you are interested in using.
  2. Once you have found the font you want to use click on the link to the right of the font that states: Quick-use. This will expand the selection of the font and display the code you will need to add to your theme.
  3. Scroll down the page until you can see the Cascading Style Sheet (CSS) reference that you need to use. It will look like this:
    <link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>
  4. Navigate to your current theme directory. Normally /wp-content/themes/yourtheme.
  5. Find the file header.php and open it in your html editor
  6. In the header.php file navigate to the part of the file where your theme CSS file is included. Below the theme CSS file reference add the new Google Fonts css reference. Your code should look similar to this:
    1
    2
    
    <link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url');?>/style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url');?>/style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>
  7. Almost done. Our final step now is to determine which HTML element we want to allocate our Google Fonts to. For example you might want to allocate the new Google Font to the h1 element. To do this open up your theme css document in your html element. Normally style.css.
  8. Lets say you want to use the new font with the h1 element. Create a new css rule and add this code to the bottom of the style.css file:
    1
    2
    3
    
    h1 {
    font-family: 'Gentium Basic', serif;
    }
    h1 {
    font-family: 'Gentium Basic', serif;
    }
  9. That’s it! Complete. Now you just need to upload the modified files to your web host for the changes to take effect.
The Google Fonts Directory previewing the web fonts

The Google Fonts Directory previewing the web fonts

 

Google Fonts displaying the CSS reference to add to your WordPress theme

Google Fonts displaying the CSS reference to add to your WordPress theme

Displaying the css code to add to your stylesheet

Displaying the css code to add to your stylesheet

Using WordPress Plugins to add Google Fonts to our themes

The great thing about using WordPress as there are nearly always plugins available for any task you want to achieve. If you are not comfortable or confident you can always download and install one of the available plugins to add the Google Fonts code for you. In this part of the article, I will list a few free plugins that are available to you as WordPress Developers or users.

WP Google Fonts

The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme. The WP Google Font plugin makes it even easier to use Google’s free service to add high quality fonts to your WordPress powered site. Not only does this plugin add the necessary Google code, but it also gives you the ability to assign the Google fonts to specific CSS elements of your website from within the WordPress admin. Or if you would rather, you can target the Google fonts from your own theme’s stylesheet.

Download the NWP Google Fonts WordPress plugin

Fontific | Google Fonts

Fontific allows you to use Google Fonts on your WordPress website. Fontific gives you a really simple way to use fonts from Google Web Font library on your WordPress-powered website.

To use one of those fantastic fonts, you just need to add a new font rule in Fontific panel(Appearance/Fonts admin menu), specify css selector to which this rule will be applied, setup font settings and save changes you’ve made. That’s it.

  • No need to edit any css stylesheets
  • No new database tables are created
  • Friendly UI (use sliders to adjust font size or line height)
Download the Fontific | Google Fonts WordPress plugin

3. Ultimate Google Fonts

Choose and customize Google fonts directly from your WordPress admin panel! Enable only font you really want to use!

With this Google fonts plugin you have more than awesame 90 open source fonts at your disposal! Choose and customize Google fonts directly from your WordPress admin panel! Enable only font you really want to use! Check text effects examples direcly in your admin panel. Text that use beautiful Google fonts is selectable.

Download the Ultimate Google Fonts WordPress plugin

GFontr, Google WebFont

Allows you to easily include fonts from the Google WebFonts library. This plugin provides an easy way to include fonts from Google WebFont API.

This plugin does not write CSS for you but call all the fonts selected in the backend page, making them easy for you to use by just changing your CSS file.

Download the GFontr, Google WebFont WordPress plugin

Google Webfonts Integrate

This plugin integrate Google WebFonts v2 to your website. Support 20 different fonts.
This plugin integrate Google WebFonts v2 to your website. You can Select 2 different Font for your two different area. You can apply with this fonts using CSS codes.

Download the Google Webfonts Integrate WordPress plugin

Conclusion

Google Font are a great way to make your site unique and look like your own creation and not “just another WordPress blog.” Please be responsible when using custom fonts though. Only use them if it is going to add visual appeal to your website. Don’t just use them because everyone else is.

Be sure to check out our other great WordPress Articles and Plugins
Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

2 Responses to How to add Google Fonts to your WordPress theme

  1. since I make a lot of modifications to my theme I prefer to use a WP theme editor that has a really great typography extension. You might think this is nowhere to find, but Lubith provides a lot of font editing options- hundreds of fonts to choose from and several modifiable properties that help you get the right looking font for your website.

    Reply
  2. is there any way to get a plugin that allows us to choose the fonts on the post / page visual editor ?

    that would be convenient for novice clients

    Reply

Leave a Reply