When you are trying to design a good looking web page you quickly realize that the fonts available in web browsers are quite limited.
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:
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.
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.
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.
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.
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.
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 .
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.
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
|1 :||tutorial_8_example_1.html||Live Demo 1|
Share this tutorial
Comment on this Tutorial
comments powered by Disqus