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 FamilyDesignerTotal Views1 Year Views1 Year Change
1Open SansSteve Matteson328,493,716,281250,255,184,153253%
2OswaldVernon Adams91,448,001,65763,838,945,300133%
3RobotoChristian Robertson82,091,758,23780,449,359,5675,830%
4Droid SansSteve Matteson80,395,602,36844,680,591,34689%
5LatoŁukasz Dziedzic50,693,918,86139,922,768,149311%
6PT SansParaType42,238,564,73127,882,142,112132%
7Open Sans CondensedSteve Matteson40,971,672,08830,209,950,351119%
8Droid SerifSteve Matteson38,177,124,48522,132,612,239106%
9UbuntuDalton Maag31,640,347,84419,834,996,66075%
10PT Sans NarrowParaType27,472,542,08017,805,606,49043%

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 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="//"
rel="stylesheet" type="text/css"›

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

@import url('');

(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

More reading:

with 1 comment 0 1205

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 *