How To Use Google Fonts (And Change Fonts In General)

Let's start with a sample file. If you've done the previous tutorials, then this should be familiar.

Here's what that looks like. What if we want to change the font?

Font Family

And here's the CSS rule to do that.

This is another way to target elements in HTML. This is targeting all paragraph elements.

Notice how all paragraph elements are now in Helvetica even though they were in different divs.

In "HTML & CSS Basics" I went over targeting elements by class and id. To do that, we needed to put "." in front of the class name and "#" in front of the id name. Notice how there's no symbol in front of the p. This is targeting an element by it's tag name. Other HTML elements, like <h3> and <img>, can be targeted by tag as well since they are created with tags.

Helvetica is a web safe font. This means all operating systems have it installed and will be able to display the text in that font. Here is a list of some web safe fonts. However, there are options to use custom fonts, and that's what Google Fonts is for.

Google Fonts

This is the home page for https://fonts.google.com/. If you click on the "+" circled in red for any font, you should get something like what is shown below. (I unchecked "Sans Serif" and scrolled a little bit down to get to that font.)

Clicking on the black bar circled in red should bring you to what is shown below.

The link goes in the html file and the font-family rule goes in the css file. What that looks like is shown below.

If you noticed, earlier I used double quotes around Helvetica. Single quotes work too.

Font Size

And if you want to change the font size, the rule is font-size. Increasing the percentage makes the font bigger and decreasing the percentage makes the font smaller.

Conclusion

Most tutorials introduce targeting by tag name first, then class targeting, then id targeting. I chose to introduce class first, then id, then tag. Because I think targeting by classes and id's are going to be used more often than targeting by tags. At least, that's been the case for me.

(The sentences in this example are pangrams, which are good for looking at how fonts apply to each letter. In case you were wondering about the choice of words.)