Web Dev

Fonts

Photo by Tim Mossholder.

1. Font-family property

body {font-family: Arial, Verdana, sans-serif;}

When you type in font-family in your CSS, you’ll see a variety of different fonts at your disposal. To display these fonts on your website, users looking at your site will need to have these fonts installed on their computers. If the user doesn’t have the first font listed (in the example above, Arial) installed, the browser will try to display the next font, then the next, and so on. If you’re wondering, sans-serif and serif refer to two very broad categories of fonts—read this article to learn more.

Note: If a font is more than one word, it must be placed in double quotes, ie, “Times New Roman.”

2. Google Fonts 

Google Fonts can easily be imported to your website. To use Google Fonts you’ll add a special stylesheet link in the <head> of your HTML document. 

An important aspect of this class is learning how to help yourself—there are tons of free, online resources to help with web development. In this case, Google’s instructions are better than any I can devise, or you can do the Free Code Camp homework dedicated to Google Fonts, too (Responsive Web Design > Basic CSS > Import a Google Font).

Test it out!

Go ahead and test this out in Visual Studio Code. First, you’ll need to create a test HTML file– you can call it fonts.html if you like! Save it to your playground folder. Generate your HTML boilerplate. Next, you’ll want to create a blank CSS document named fonts.css and save it in a the css folder in playground. Make sure to link your external stylesheet in the <head> of your HTML document. Okay, now we are ready to go!

Open Google Fonts in a web browser. Spend a couple of minutes browsing the font options and click on one you like. Click on a font that you like. It will open to a page that looks like this:

Now it’s time to go shopping (with Google bucks). Click “Get Font” in the top right corner. That will add the font to your bag and give you some options.

Click “Get embed code,” and brace yourself.

Make sure the “<link>” option is toggled rather than the “@import” option (this should occur automatically).

Copy everything from the “Embed code in the <head> of your html” box and paste it … into the <head> of your html. Mine looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<link href="css/fonts.css" rel="stylesheet">

</head>
<body>

    <h1>Let's test out some fonts</h1>>
    
</body>
</html>

You’ll want to add a little content to this webpage so we can apply the font. Go ahead and add a heading or two, a paragraph– whatever you like.

Now that you’ve got a little content, pick an element that you’d like to apply the font to—maybe a paragraph or heading. In your style sheet, add a selector.

Next, copy and paste the CSS rule from Google Fonts (the part highlighted in blue) into your stylesheet.

Your stylesheet should look something like this: 

h1 {
     font-family: "Montserrat", sans-serif;
   }

That’s it! Save both your HTML and CSS files and give the HTML file a preview in Chrome. You should see the font on your screen.

Feel free to practice some of your CSS skills and have a little fun here: maybe add a color, change the font-size, or test out some of the Google Font Effects.1

Selecting fonts

  • Less is more: typically, designers stick to three fonts.
  • Look at free resources for font pairings, such as fontpair.co and fontjoy.com. Try to not pick fonts randomly; every design choice should serve a purpose. Comic sans is not an appropriate font for a small business site, for instance.
  • When it comes to picking font sizes, pay attention to the typographic scale—the size of fonts and how they work in relation to each other. Check out typographic scales like type-scale.com.

  1. Go easy with these, they are fun but a little… intense and could make it hard to read your text if you aren’t careful↩