Best Google Web Fonts & How To Use On Your Site

The font (or typography) you decide to use can make or break your website. The font you decide to go with can be the difference between engaging with your visitors or having them run for the hills.

Most popular google web fontsUp until a few years ago site owners were limited to use only a handful of “web safe” fonts (think Arial).

Today thanks to open-source projects like Google Fonts, the number of web fonts available for use has increased dramatically – literally exploded.

This blog post consists of two parts, first it will cover the most popular web fonts from Google Fonts, secondly it will show you how (easy) you can use Google Fonts on your website.

Most popular Google Fonts

Font Family Designer Total Views 1 Year Views 1 Year Change
1 Open Sans Steve Matteson 328,493,716,281 250,255,184,153 253%
2 Oswald Vernon Adams 91,448,001,657 63,838,945,300 133%
3 Roboto Christian Robertson 82,091,758,237 80,449,359,567 5,830%
4 Droid Sans Steve Matteson 80,395,602,368 44,680,591,346 89%
5 Lato Łukasz Dziedzic 50,693,918,861 39,922,768,149 311%
6 PT Sans ParaType 42,238,564,731 27,882,142,112 132%
7 Open Sans Condensed Steve Matteson 40,971,672,088 30,209,950,351 119%
8 Droid Serif Steve Matteson 38,177,124,485 22,132,612,239 106%
9 Ubuntu Dalton Maag 31,640,347,844 19,834,996,660 75%
10 PT Sans Narrow ParaType 27,472,542,080 17,805,606,490 43%

open sans google fontOpen Sans is by far the most popular Google Font. It has been viewed more then 320 million times!

Here you can see what Open Sans look like in action and sites that use this web font.

How to Use Google Fonts on your website?

There are two methods for implementing Google Fonts on your website, you can use the Google Fonts API or you can use @font-face.

1. Google Fonts API (using the Open Sans font as an example)

Head over to http://www.google.com/fonts and pick the font you want to use.

This method is very straighforward. You use Google Fonts API to import the web font.

Add an external CSS stylesheet using the Google Fonts API in theof your HTML document. For example:

‹link href="//fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet" type="text/css"›

or you can drop it in the css file. For example:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

(Important: the @import line of code should be the very first line in your CSS file)

As a last step, add the font name to your CSS styles just as you would do normally with any other font. For example:

body {font-family:'Open Sans';}

2. Use the @font-face rule (using the Open Sans font as an example)

The @font-face rule works for all browsers, it does not rely on JavaScript and ensures cross-browser compatibility. The downside is @font-face takes a bit longer to implement than Google Font API (more code).

You will need to host the font files (.eot, .ttf, .svg, .woff) on your server and add them to your CSS styles. Here is an excellent tutorial.


@font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?#iefix') format('embedded-opentype'),
url('FontName-webfont.woff') format('woff'),
url('FontName-webfont.ttf') format('truetype'),
url('FontName-webfont.svg#FontName') format('svg');

The easiest and quickest way is to use FontSquirrel, it grabs the font and prepares the variants and CSS for you to upload on your server.

WordPress plugins

If your site is using WordPress then there are heaps of plug-and-play plugins that installs Google Fonts for you. Have a look on this WordPress plugin page for a list of plugins.

If you prefer to go down the I-don’t-like-to-use-plugins route then here is a good read http://tasko.us/add-google-fonts-wordpress-theme/

More reading:
https://developers.google.com/fonts/docs/getting_started
http://blog.hostgator.com/2013/06/27/a-guide-to-using-google-web-fonts/
http://www.html5rocks.com/en/tutorials/webfonts/quick/
http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/
http://noteandpoint.com/documents/pdf/fontshop-webfonts.pdf

Matt

Matt is the founder of Hosting Kingdom
with 1 comment 0 3256

One comment on “Best Google Web Fonts & How To Use On Your Site”

  1. Pingback: Design | Learning Task 14 | Type Research | Scott Dixon

Leave a Reply

Your email address will not be published. Required fields are marked *