Do Google web fonts make your WordPress blog SEO friendly?

Do you lose readers just because your WordPress blog is too plain and boring? Your blog might be helpful but it may not grip someone because the text doesn’t look appealing.

We all know a relevant quality readable text is what Google wants. Google views your text as the most important factor when ranking websites. Therefore, it’s important to keep as much website content in readable text format for SEO.

Do Google web fonts make your WordPress Blog SEO friendly

Do Google web fonts make your WordPress Blog SEO friendly

Google web designers have come up with Google web fonts that provide you an amazing way to use fancier text on their site, without having to embed it in to images.

The good news is you can add Google fonts to your WordPress without any plugins that slow your loading speed just like Google wants. You can even change the font size and colour as well.

Google creates a directory of web fonts for web designers to use. Google’s API service makes it easy to add some really cool fonts to a website in seconds. The best part is that  this service runs on fast, reliable and tested servers, free of charge.

How to use Google web fonts?

 

Lora font family

Lora font family

  1. Choose the web font(s) you want to use at Google fonts.

  2. Click on the Quick Use button for the font(s) you want to use on your site.

  3. Google generates the code for you on the Quick Use page.

  4. To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

The code can be embedded in three different ways – standard, @import and javascript. You only need to choose one of them For example, if choose the Lora font family:

standard

<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>

The HTML header code goes in the <head> section of your web page(s).

@import

@import url(https://fonts.googleapis.com/css?family=Lora);

The CSS import code goes in your style sheet.

javascript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lora::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

The Javascript code can be placed alongside the rest of your script code.

5. Integrate the fonts into your CSS

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. You just need to add the font name to your CSS styles. For Lora font

font-family: 'Lora', serif;

Do Google fonts make your WordPress blog SEO friendly?

Only use fonts that can attract users and increase readability. Avoid multiple fonts for headings and other text formats.

Using custom fonts make your site more appealing, increase visitors engagement and social sharing but it also can affect SEO ranks.

A low Page Speed can reduce your blog traffic but impressive readability will improve visit duration time.

We all want attractive articles for blogs and images do that for you, but images should not  be used to display text.

You need to be careful while choosing your web fonts to make your blog SEO friendly provided they don’t affect the loading speed of your page.

Optimize your web fonts for SEO

Merge multiple fonts into a single request

One pattern we see frequently is a separate <link> tag for each of the font requests. You can easily combine multiple font requests into a single tag, just separating the fonts with a | character.

So, instead of:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo">

you can write:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Arimo">

This trick will save the server from requesting an additional font and also protect against blocking on older browsers which only have two connections open per domain at a time.

Avoid using the @import directive in an external CSS

Unfortunately, Internet Explorer doesn’t work well when one external CSS file links to another using an @import directive. If it weren’t for performance issues, it would be good to have the extra flexibility of putting the @import in the same CSS file that uses the fonts, but for best performance, put the <link> tag in the base HTML file.

When that’s done, the Font API CSS will usually load in parallel with other external CSS files in the page.

Select your font style

Fonts in Google Webfont have font styles like normal, bold, italic and light. Adding all these font styles to the specification will increase the font size and also affect the page load performance.

As we can see below, by deselecting some of the styles, the page load will turn much faster.

select all font styles

Don’t select all font styles

select single font style

select single font style

Fewer number of font files offer better page loading speed.

Add a new text parameter 

All you have to do is add a new text parameter to the Google font request URL and value of this parameter will have all the letters that you need.

For instance, if I need to render the text onlineshouter in Oswald font, the modified CSS requesting the Google font file will look something like this:

<link href='http://fonts.googleapis.com/css?family=Oswald&text=TEXT' rel='stylesheet' type='text/css' />

Select the character set you want to include

To support different languages, many fonts in Google  also provide multiple sets of character. For example, the Arimo font family provides the character set for Latin, Greek and Hebrew characters. Google provides the option for easily selecting which character set we want to include.

If you include all the character sets, it will increase the font size and degrade the page load performance. So instead of using the entire Google font family, you can specify a limited set of letters or digits that are used in your text and Google will dynamically generate a new font file containing only the requested characters.

Christine

Christine

Author at onlineshouter
Christine writes for people who seek for knowledge about SEO, blogging, online marketing, gadgets and web apps.
Christine

3 comments

Leave a Reply

Your email address will not be published.