Using Google Fonts

Using Google Fonts

Using Google Fonts is a great way of adding an extra dimension to the look of your website. The problem with using non-standard fonts has always been that whatever fonts you use within your website design, had to be compatible with the end-users computer. With Google fonts that is not an issue as the font is provided by the website.

 

There are two main ways to incorporate Google Fonts

There are two main ways to incorporating a Google font into your website. The simplest way is to add the link into the header of your page.

 

Link to Googles site

To add the popular “Lato” font add the below code into the header of your page.

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

Now all you have to do is add the below code into your sites stylesheets.

font-family: 'Lato', sans-serif;

If you want it to be the standard font on your site then add it into the “body” tag.

 

Embed into your website

If you would rather import the font into your site firstly download it from Googles site via the https://www.google.com/fonts#UsePlace:use/Collection:Lato URL. Once on the page download the font as a zip file as per the below images.

 

download google lato font

 

And select the .zip file

 

download zip file

Once you have done this all you need to do is extract the font files from the zip file and upload them to your website. I would recommend putting them in a folder.

Now that you have completed this you need to load them into your site. Instead of a link in the header this is done via the .css file.

@font-face {
 font-family: 'Lato';
 src: url('webfonts/Lato-Regular.ttf') format('truetype');
}

In the above case I am loading it from the “webfonts” folder. To use the font in your website you just use the same method as your did in the first option. That is put the following code in the “body” or whatever tag you wish:

font-family: 'Lato', sans-serif;

How simple is that?

 

Conclusion

With the release of Google fonts you are now seeing alot more variation in website design in relation to font use. I would however stress that not all fonts are suitable for the body text. And I believe Comic Sans is still a “no no” when regarding font selection.

Leave a Reply