So, you’re making a website, and you want to dress it up by changing the font (style of print). How would you go about it? Let’s add Google Fonts!

First, go to the Google Fonts website: https://fonts.google.com/ (screenshot below).

Look through the available fonts to find one that you like. You can scroll through the different options, use the Search box, or try the dropdown menus to narrow down your selections.

If you hover your mouse cursor over one of the fonts you’ll notice additional options.

The leftmost Red menu is a dropdown that lets you see a paragraph, a sentence, the alphabet, and numerals in that font. The dropdown’s 5th option: Custom will let you test out the font using your own text; like your name, for instance.

The centermost Red menu is also a dropdown. This one lets you adjust the font-weight; also called the boldness of the font. The level of boldness ranges from 100 (thin) to 700 (bold); with 400 (regular) being the default.

The rightmost Red menu is a Slider Bar. It lets you change the size of the font in pixels (px – a common web measurement). The font-size ranges between the tiny 8px to the enormous 300px; with 40px being the default.

When you find the font(s) that you want, click the Red circle to the right of the font’s name to select it.

After selecting a font you’ll notice a Black bar in the lower right hand corner of the screen (see screenshot below). The bar will tell you how many font-families you’ve selected. In the example below 1 font has been selected.

Next, click the Black bar to expand the selection menu.

Below you’ll see the expanded selection menu, and that I’ve selected 2 fonts: Josefin Sans & Libre Franklin.

Now, to add the fonts to our website

If you’ll notice, the selection menu is made up of 3 sections: Your Selection, Embed Font, and Specify in CSS.

Personally, I always use the STANDARD option instead of @IMPORT. I’m not sure exactly why, but somewhere I heard that it’s the better way to go. 🤷

Embed font

Next, you’ll want to copy and paste the link code into the <head> section of your HTML code. For an example, see the HTML section of my CodePen below.

Specify in CSS

Then, copy and paste, the font-family styles into your CSS rules. For an example, see the CSS section of my CodePen below.

Then, stand back and admire the pretty font. 😀

TIP💡: Keep your font choices to no more than 2 fonts. Using more than 2 may cause a slowdown in the loading time of your page. Do your users a favor, and keep it simple.

Check out my CodePen below to see what a difference changing font can make. I suggest viewing it at the 0.5x setting.

In the CodePen’s CSS section under #improvedTitle & #improvedFont, you’ll see where the code for the two fonts has been specified. Also notice, that a fallback font has been specified for each selected font. The fallback font for both selected fonts is sans-serif.

Question: Why use a fallback font?

Answer: Because not all web browsers display all types of fonts.

TIP💡: If you want to use multiple fallback fonts, be sure to separate each font name by using a comma; in order of: your chosen font, second choice, third choice, etc… The browser will see if it can display your first choice, if not it will check the next and so forth; until it finds a font that it can use. That’s why a standard web font like sans-serif is the fallback for our example above. Sans-serif is in the same font-family as the 2 fonts that were selected.

Just be sure to test what your site looks like using your fallback fonts. That way you’ll avoid unpleasant surprises.

According to the Google Fonts website:
The Google Fonts API is compatible with the following browsers:
Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

This means that older browsers, won’t be able to handle all the prettiness you just added. 😡

That’s all for now. Thanks for reading! 😉