Using Google Fonts

Google Fonts is a free library of thousands of open-source font families that you can easily integrate into your HTML projects.

Why use Google Fonts, you may ask? The main reason you might want to use Google Fonts is variety. When we set the fonts on a web page, we can specify a list of fonts to use. The browser will use the first one it finds on the user's computer. If we specify a font that isn't available on the user's computer, the browser will move to the next font in the list. If none of the fonts are available, the browser will use its default font.

As you might imagine, this limits the fonts you can use to those that are installed on the user's computer. However, by using Google Fonts, you can ensure that all users will see the correct font, regardless of the fonts on their local system. That's because the fonts are downloaded from Google's servers to the user's computer.

Using Google Fonts takes just a few steps: select your fonts, copy the generated code, and apply it to your CSS.

Step 1: Select Your Font

Visit the Google Fonts website and find a font family you like. Click on it, then select the "styles" (weights and italics) you'd like to use. For better performance, only select the weights you actually need.

Step 2: Copy the Code

Once you've selected your styles, Google Fonts will provide you with a block of code to include in your HTML document. This is usually a set of link tags meant to be placed in the head of your HTML file.

It will look something like this:

Step 3: Apply the CSS

Finally, the actual application of the font is done using the font-family CSS property. Use the name provided by Google Fonts (make sure to include it in quotes if it has spaces).

Complete Example

Here is a complete, working example of an HTML document using the Roboto font from Google Fonts:

Alternative: Using @import

Alternatively, you can use the @import rule directly inside your CSS file (instead of using the link tag in your HTML). Google Fonts provides this option as well, which can be useful if you want to keep all your font-related code within your CSS file.

Example: