Skip to main content

Give your site a little beauty with use of some Google fonts with wordpress.

If you are working on your new wordpress project or you have an awesome website ready, but you want some good typography to give your website a good look, then i think you should read this article. Well, you want to add some finest fonts for free, then google fonts are always available to make your site elegant.

Google has most amazing free, web-ready and open-source web fonts and you can integrate those fonts on your website quite easily.

Web Fonts

In case you don’t know about google web-fonts, head over to the google fonts library and you will get to know about what’s that awesome thing. Out of hundreds of free fonts, you can choose your desired fonts based on specific categories such as:

  • Serif
  • Sans-Serif
  • Display
  • Handwriting
  • Monospace

Several Characteristics as:

  • Thickness
  • Slant
  • Width

Google fonts also provide some scripts from which we can choose the type of fonts that literally helps for translation purpose.

  • Cyrillic
  • Cyrillic Extended
  • Devanagari
  • Greek
  • Greek Extended
  • Khmer
  • Latin
  • Latin Extended
  • Vietnamese

At this time of writing there are 657 font families are available and no doubt you will get confused to choose the best fonts for your site from the best collection of web fonts. You can help yourself by sorting the web fonts based on:

  • Alphabet
  • Date added
  • Number of styles
  • Trending
  • Popularity

Well, this was just a starting information for beginners. Now let’s walk through the rest of the article showing how to implement those beautiful web fonts into your wordpress website.

Manually using code

Great, you have your choice of google fonts in your collection and you wanna use it for your wordpress project. Okay just click on “quick use” symbol button.

1-google_fonts

After clicking that button you will be taken to a new-page. Scroll down your page and you will get something like this tab style-box.

2-google_fonts

You just can copy that code for the future use. You can do the same procedure if you want to use multiple fonts for your site, just click on “Go back and add more fonts” at the very top of your page. Google fonts offers you to choose what weights and types of your selected font you would like to use. The most demanding you will become on this particular case, you will see a google page loader in the right showing a page load time meter.

3-google_fonts

Also keep in mind that as many fonts you will use, your website will load that much slower. So try to use only couple of fonts for your site.

Google will not stop giving you options. Here you will get 3 options to use your chosen fonts.

  • standards
  • @import
  • javascript

The easiest method is to use @import code. Just copy that code from @import tab and paste the code in your style.css file.

Actually that is not the best way to use google fonts. This method block parallel downloads. It simply means that the browser will wait for the imported file to finish the downloading before it actually starts downloading the rest of the content. Nevertheless, if you still want to use @import method for some specific reasons, just try to avoid additional http queries by combining multiple request into one single line.


@import url(http://fonts.googleapis.com/css?family=roboto|sans);

Standard Method

Just copy the code from the standard tab and paste the code in the head section of your header.php file.

You will also notice the usual CSS styling like:


font-family:'Roboto', Sans-serif;

Use this code in your CSS file where you want that fonts to appear. For example:


p{
	font-family:'Roboto', Sans-serif;
}

With the use of a Plugin

Okay, WordPress got several plugins that allows the google fonts integration to your wordpress website.

Using a plugin is time saving idea and easy to implement, you just have to install the plugin in your wordpress site. But there are some cons as well. Plugins don’t provide the fonts of your choice for the custom or specific classes. You have to customize those specific classes with your css and html coding. Anyway these are the plugins that are recommended:

WP Google Fonts

wp google fonts

Easy Google Fonts

Easy Google Fonts Plugin

Well, this article was to show you that how you can add the google fonts to your website in right way that can actually make your site load that much faster. I hope, that this information help you to make use of google fonts with wordpress. Cheers!!

  • Good day I am so excited I found your site, I really found you by accident,
    while I was searching on Digg for something else, Anyhow I am here now and would just like to say thanks a lot for a incredible post and a all round enjoyable blog
    (I also love the theme/design), I don’t have time to go through it all at the
    minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read
    more, Please do keep up the excellent job.