Tutorial #8
Web Typography with Google Fonts Basic   2013-11-04

Introduction

When you are trying to design a good looking web page you quickly realize that the fonts available in web browsers are quite limited.

But over the past few years that has all changed with the availability of Web Fonts that are downloaded with a web page just like a JavaScript or CSS file.

There are now multiple sources for web fonts - Google Fonts and Adobe Edge Web Fonts are Free, others such as fonts.com and Typekit require a paid subscription.

The number of choices available to a designer are remarkable (more than 600 in Google Fonts alone!). In fact, to a non-designer they can seem overwhelming.

This tutorial shows you how to embed and utilize several fonts from Google Fonts in a web page. The example code will look like this:

Screenshot ...


Step by Step

1: Go to Google Fonts. You will see a number of font samples displayed and you can scroll down to see many more.

Screenshot of Google Fonts Web Site

2: Browsing through that number of fonts quickly becomes tedious so the site has several filters that you can apply to narrow down your choice. For example you can view just the fonts in the handwriting category and you can select subsets based on thickness, slant and width. You can select the size and example text and, perhaps most useful, you can sort results according to popularity, trending etc.

Screenshot of Google Fonts Web Site

3: Even with these filters, it is still difficult to choose the fonts that suit your site. The best approach I find is to add fonts that look interesting to my Collection, using the blue Add to Collection button on the right of each font sample.

Screenshot of Google Fonts Web Site

4: Compare the fonts your Collection using the Review button in the Collection panel.

For an even better comparison, click the Try in Typecast link, which takes you to typecast.com.

Screenshot of Google Fonts Web Site

5: If you find one font that you like, you can get some suggestions from Google Fonts.

Click the Pop out button below the font sample, then in the window that appears, select the Pairings tab. The suggestions are not necessarily exhaustive, but you might find them useful.

Screenshot of Google Fonts Web Site

Screenshot of Google Fonts Web Site

5: Having made your choice of a font, embedding it in your web page is straightforward.

For a single font, click the Quick-use button. In the window that appears, scroll down to step 3 and click the @import tab .

Screenshot of Google Fonts Web Site

Screenshot of Google Fonts Web Site

6: Copy and paste the @import text shown in that box into your CSS stylesheet or <style> block

7: Copy and paste the font-family text shown in next box into your stylesheet inside the tag or class definition where you want to use this font. See the code shown below for an example.

8: Edit your web page html to use the specific class, etc, reload and you should see your font in use. You can use multiple fonts in a single page and the Google pages make it easy to download multiple font links at the same time.


Understanding the Code

The code is straightforward. The CSS @import lines load the fonts into your stylesheet and you specify them in the appropriate classes using the font name. It is always a good idea to add a fallback font name in case the Google font is not available for some reason.

I'm showing the CSS @import syntax here but you can use separate links to the stylesheet URLs if you want. There is also a Javascript option, but there is no need for this in simple cases.

Take a look at Google Fonts Getting Started guide for more information.

Be sure to check out the Font Effects section - this feature is currently in beta but allows you to apply some interesting (and some dreadful) filters to your text.

Downloading fonts, or font weights, that you don't use will impact the load times for your pages. The pages shown above allow you to specify exactly what you need, so once you are comfortable with your design, be sure to optimize those specifications.

Finally, just because you can use many fonts does not mean that you should use them. The best web page designs keep things simple with a few carefully chosen fonts.

Experiment with this code on CodePen


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus