Wouldn’t it be nice if we didn’t have to worry if a particular font was installed on a machine? That the font we actually want is able to show in a browser without the need for any fallback fonts? in this post, we are going to learn how to use a font even when it is not installed on a specific computer. We’re going to be using our HTML and CSS files from the previous posts to learn how.
Google provides a free service to developers called Google Fonts. It’s a library of almost 900 (884 at the time I write this) free fonts to use on any web page. The cool thing about using Google fonts is that while you can download the fonts and use them on your server, you can also just link to them in the head section of your web page and the browser will display those fonts on any device. There is no need for any particular font to be installed on the user’s computer. You can find Google Fonts at fonts.google.com.
Let’s pick two fonts, one for our paragraphs and one for our heading. I’m going to select the dancing script font for my paragraphs and the luckiest guy font for the heading. They are really different and we’ll be able to see that the font is actually working. You can pick whichever font you like. To select a font just click on the “+” icon in the upper-right of the font that you want.
When you select your fonts you’ll notice a horizontal bar at the bottom of the screen telling you how many fonts have been selected.
Clicking on the bar slides up a window that tells you how to include the font in your site.
At the top, you’ll see the fonts that you selected and a (hopefully) green oval showing how fast the page will load if you use that font. You want a fast load time so the color of the oval should be green.
How To Use Google Fonts
To use our selected fonts we just copy the <link> tag and paste it in the head of your HTML file. In my case, I will copy:
<link href=”https://fonts.googleapis.com/css?family=Dancing+Script|Luckiest+Guy” rel=”stylesheet”>
After we place the link in the head section, we can use the fonts in our CSS file. We’ll replace our font-family property in our p selector with our Dancing Script font. While we’re here, let’s get rid of the wavy lines.
Next, we’ll replace the font-family property in our h1 selector with our Luckiest Man font.
If you remember from the last post, our page looked like this.
Just by changing a few lines it now looks like this.
You can actually download any font you want and install it on your computer by clicking on the download button in the top right of the window that slides up.
Doing this will allow you to use this font in whatever other documents or files you like.
In this post you learned about Google Fonts and how to use them in your own web pages. Next, we’ll take a look at an important concept in web design called “the box model”.