How to Use Google Fonts in Your Website Designs

The Best Thing to Happen to Web Design

Grid view on the Google Fonts display page

Possibly the best thing that happened in website technology in the last few years is our ability to use a variety of fonts in our designs.

In the olden days, we were limited to the basic fonts that were installed in all computers. Though we got pretty creative with Times New Roman and Verdana, a whole world of typography has been opened.

One of the best resources for using different font on your website is Google Fonts. It’s free to use, has over 680 fonts (and counting!), and will add a ton of visual appeal to your website designs. Want to know how to use Google Fonts to add more excitement to your designs? This guide will show you…

First, go to Google Fonts

This is the first page you will see. It will show a default set of fonts, all 682 of them. Here, you can filter for sans serif, wide, narrow, script or slant. You can change the text, and see what your actual text looks like in each font. The grid view is also kind of fun.

google Fonts main screen

You Can Set Your Own Options

Here, we have annotated the screen to show you the options you can set. Try changing size, or see your font in poster view. See what’s popular, trending or sort by alphabet.

Below the sample sentence, the 3 little boxes allow you to view the style set for bold, italic, light, and so on. The middle button is Quick-Use, which shows you how to install the font in your site code and the impact it has on site speed. The little box on the right pops out the font for even more detail. You can see this below.





The Quick Use Page

Below is the Quick Use page, showing 3 selected fonts. The impact on page load is shown on the dial. On the top right, you can bookmark the fonts or download them.


Pop Out Views Shows How To Pair Your Fonts With Others

Pop out views tell you the story of the font, and what updates have been made to the font.

The pairings tool is another feature and is fun to use. It will give you suggestions on what fonts work well with the one you chose. Narrow fonts pair well with wider body fonts, fancier script fonts work well with simple ones. This gives a contrast in the fonts you use.

Be sure to try your own combinations. We used Oswald paired with Open Sans on our website. Varying sizes and weights can give you variety, even if it’s in the same font family.

Google Fonts Pop-out-1Google Fonts Pop-Out-2

For All You Analytics Geeks

Google provides stats on how many people viewed the font and where it’s been used around the world.

Google Fonts Pop-out-statistics

Using Web Fonts Makes Sites More Efficient Too

Using Google Fonts can add visual interest to your website designs in a way that was not possible a few years ago. In the past if we wanted make anything different or make our website stand out, we had to make images out of the text and add it as a JPG. Using ‘live’ fonts (like with Google Fonts) will make your site load faster, and your text will now be editable. This is definitely the best thing that has happened to web design since WordPress!