Complete Guide To Use Free Exciting Google Web Fonts In Your Website

If you are a designer it is likely that you consider typography being the foundation of any web design.

It is not only the selection of fonts per se, but goes much beyond that with the aim of giving an edge to the readability of the web page.

Typography, as Wikipedia informs, is not just fonts but involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

Clearly then, selecting and using fonts that spell class call for an eye on details. It is a craft that is best left to the designers.

The trouble is, not every website owner is a designer. Most in fact are not. And for small startups it is difficult to afford designers.

What then is the hope for small web startups who wish to look good yet scared at the cost involved?

Here is a simple answer.

Get a free CMS theme say from WordPress, and then redesign it to give it a distinct yours-only look.

More importantly, select some of the great free web fonts provided by Google and use them to further cement the good looks of your website.

At HubSkills.Com we use Avada, one of the most popular WordPress themes. Avada is versatile, and very adaptable for any web kind of web business. And of course it includes pre-selected free Google fonts.

In this article we will look at the different ways to use the free web fonts, whether in WordPress or standalone website. Before delving into that let’s understand some basic issues in the selection of the right web fonts for any website.

Watch my following video before continuing to read more.



 

ABCs of Font Selection

For any web designer, the ultimate test of his skills lies in how the visitors look at his creation. In today’s web scenario it is a split-second decision on the part of the viewers whether to stay back for more or move away to other sites.

The importance of typography, and indeed that of the color selection and the web layout should be seen in that context.

But typography is the most important of the three because this is what the eyes look for.

They after all come to gather information…don’t they?

Take a look at some interesting issues for helping you select the right fonts for your website:

 

Few Is Better

Such is the range of free fonts available that it is difficult not to get spoiled for choice.

It is a near possibility that a new website owner or even an old hand will want to use 4-5 web fonts or maybe a few more in a single page. But don’t…if it’s you.

Generally speaking, more fonts add inconvenience and confusion to the average reader. This is the least that you’d want as a website owner…unless of course you’re aware of what you’re doing and why.

 

You Want Them Read

Guess what’s the main purpose of using a certain web font?

In this article on what’s the best font for website, the author Derek Halpern rightly points out that the main goal of a font is to be read.

And in this article Shannon Noack says that the 4 things to consider about text on the web are contrast, color, readability, and size.

 

Simple Fonts vs Fancy Fonts

Before you are dismissive of one or the other of the 2, here is the revelation.

Both have their own places of pride, and depend largely on where they are used and for what purpose.

In the report, If It’s Hard to Read, It’s Hard to Do, researchers Hyunjin Song and Norbert Schwarz of University of Michigan found that people who read a set of instructions in a simple font (Arial) take nearly half the time (8.2 minutes) to follow than when (15.1 minutes) written in a hard-to-read font (Brush).

While giving a similar example as above by the same researchers, Roger Dooley of Neuromarketing suggested that –

if you need to convince a customer, client, or donor to perform some kind of task, you should describe that task in a simple, easy to read font.

However it is not that in all instances it is the best to use simple web fonts.

As Roger points out in this article, fancy and hard-to-read fonts can work wonder in restaurant menus because based on yet another experiment, the subjects who saw the difficult font rated the skills needed by the chef significantly higher than the subjects who saw the simple font.

 

Using Google Web Font In Standalone Pages

As of this writing there are 601 font families with Google web fonts. Watch them in grid view (Word, Paragraph, and Poster tabs) or in list view (Sentence tab).

See the screen-image below.

 

Grid view of Google web fonts sorted as per popularity

 

Google fonts are hosted on their servers. All you need to do is select the fonts and then copy the appropriate code(s) for use in your website. The steps to use them are as under:

  • Open the page, http://www.google.com/webfonts in your browser.
  • From the list of the fonts, select the ones you want by clicking the link Add to Collection for each font. I’ve selected 2 fonts, Open Sans Condensed and PT Sans.
  • After done ‘collecting’, click the tab Use at the bottom right of your screen.
  • In the page that comes, scroll down to come to Sl.3 of the options that says, Add this code to your website:
  • Notice the 3 tabs for the codes to be used: Standard, @import, and Javascript. The first 2 codes for my selections are as under:
     

    Standard
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|PT+Sans' rel='stylesheet' type='text/css'>
     
    @import
    @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|PT+Sans);
     
    To integrate the Standard code in your website, use the sample HTML as under:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|PT+Sans">
    <style>
    body { font-family: 'Open Sans Condensed'; font-weight: 300; font-size: 48px; }
    p { font-family: 'Droid Sans'; font-size: 28px; color: #C90;}
    </style>
    </head>
    <body>
    <div>Making the Web Beautiful!</div>
    <p> Come, let’s make the web beautiful!</p>
    </body>
    </html>

     
    To use the @import code in the above HTML, change it as per following:
    <html>
    <head>
    <style type=”text/css”>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|PT+Sans);
    body { font-family: ‘Open Sans Condensed’; font-weight: 300; font-size: 48px; }
    p { font-family: ‘Droid Sans’; font-size: 28px; color: #C90;}
    </style>
    </head>
    <body>
    <div>Making the Web Beautiful!</div>
    <p> Come, let’s make the web beautiful!</p>
    </body>
    </html>

The following 2 images show how the webpage looks with and without using the 2 web fonts.

 

Webpage using Google web fonts

 

Webpage without using Google web fonts

 

Using Google Web Font In WordPress

WordPress users can install plugins for Google web fonts, but it is also possible to use selected fonts without the plugins. We will look at the various ways of doing this in the next article.

Questions, tips, suggestions, discussions are most welcome. Use the form below for the purpose.

 

 

2016-10-13T11:30:37+00:00 Web Design|

One Comment

  1. Tim September 20, 2016 at 5:55 am - Reply

    This is out of date now as Google Fonts updated their interface

Leave A Comment

Monetize the teacher in you, teach globally