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 fonts

Up 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 is by far the most popular Google Font. It has been viewed more than 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 straightforward. You use Google Fonts API to import the web font.

Add an external CSS stylesheet using the Google Fonts API in 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 the 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.

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.

Similar Posts

Leave a Reply

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