Font Families and Google Fonts

💡 The Concept

Adding CSS Google Fonts to a project is one of the fastest ways to make a website look more polished and professional. CSS gives you powerful tools for controlling every aspect of how text appears — starting with the font itself. And with Google Fonts, you have access to over a thousand free, professionally designed typefaces that can elevate your designs instantly.

Understanding Font Family

The font-family property tells the browser which typeface to use. You specify one or more font names as a “font stack,” and the browser tries each in order, falling back to the next if a font is not available on the user’s system. It looks like this:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

The browser tries “Helvetica Neue” first, then Helvetica, then Arial, and finally falls back to the system’s default sans-serif. Always end your font stack with a generic family (sans-serif, serif, or monospace) as a final safety net. The reason why “Helvetica Neue” is in quotation marks is to make it clear that it is meant to be one font and not two.

Note that unlike the CSS shorthand like you use for a border (eg. border: 3px solid black), you put a comma between each font. That is because only one will be applied to your HTML.

Web-Safe Fonts

Web-safe fonts are typefaces that come pre-installed on virtually every computer, phone, and tablet — Windows, Mac, iOS, and Android alike. Because they are already on the user’s device, the browser does not need to make any external request to load them. They display instantly and reliably, no matter where your page is viewed.

The most commonly used web-safe fonts include Arial, Helvetica, Georgia, Times New Roman, Verdana, Trebuchet MS, and Courier New. Each has a distinct personality: Georgia and Times New Roman are classic serif fonts, while Arial and Verdana are clean and modern sans-serif choices.

The main limitation is selection — there are only about 13–14 reliable options, and most people have been looking at them on screens for decades. That said, they are a perfectly solid choice for projects where speed or simplicity is the priority.

The Web Safe Fonts tool on your Tools of the Trade page lets you preview every web-safe font and copy the ready-to-use CSS code directly into your stylesheet.

Google Fonts

Web-safe fonts are dependable but limited. They can make your site look generic. This is where Google Fonts comes in. Most websites are made with Google Fonts, because they are free and easy to use.

Google Fonts is a free library of over 1,500 font families. Instead of relying on what’s installed on a user’s computer, Google Fonts serves the typeface from Google’s servers, ensuring everyone sees exactly the font you intended.

Filtering and Choosing Google Fonts

Because there are so many free fonts available, it can be difficult to navigate. Use the left panel to filter.

• Go to fonts.google.com
• Type in your name or some text into the preview
• Play with the various filters to find a font that you like.
• Once you decide on a font-family, then click the Get Font button. 
• When you are done selecting font-families, go to your shopping cart.
• Click the Get Embed Code button.

In web design, it is important to make the text easy to read, especially the regular text. A common practice it to choose an easy to read font for the overall text, and then to override it for the major headings.

Installing Google Fonts

In order to make a font-family available for your use, you need to import the font-family into your website. The easiest way to do this is by adding the @import code to the top of your CSS file. By putting it directly into your CSS file, you will have the font available for your entire website. Do not copy the <style> tags. They are for HTML.

One Font vs. Two Fonts

Most websites use one of two font strategies.

Strategy 1: One font for everything. Choose a clean, readable font and apply it to the body selector. Every element on the page inherits it automatically. This is the simplest approach and works great for professional, no-fuss designs.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

Strategy 2: A fancy font for headings, a simple font for everything else. This is the most common approach on real websites. You choose an eye-catching or decorative font for h1 and h2 to give the site personality, and a clean, easy-to-read font for all other text.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2 {
  font-family: 'Playfair Display', serif;
}

⚠️ Important: Never use a decorative or fancy font for regular body text. Decorative fonts are designed to grab attention at large sizes — a few words in a heading. When used for paragraphs, they become difficult to read and exhausting on the eyes. Save the personality for your headings and keep your body text clean and simple.

🎬 Video Demonstration

This video demonstrates how to choose and install Google Fonts on your website. (Google Fonts have changed a bit since I made this video, but the principle is the same, and it’s easy to see how it works in JSFiddle.)

Exercise: Try It Yourself

Step 1. Go to JSFiddle.net. Place the following HTML in the HTML section so you have some text to style.

<h1>Minneapolis Lakes: The City's Outdoor Playground</h1>

<h2>Lake Harriet</h2>

<p>Lake Harriet is one of the most beloved lakes in Minneapolis, surrounded by a paved path that stretches nearly three miles. </p>

<h2>Lake of the Isles</h2>

<p>Lake of the Isles sits just north of Lake Harriet, with a shoreline that winds around two small islands and marshy inlets. <p>

Step 2. Go to fonts.google.com

Step 3.Select a font that is easy to read. This will be the base font for your website template. Some popular fonts that are easy to read are Roboto, Open Sans, Montserrat, or Lora. 

Step 4. Find and click the Get Font button. 

Step 5.Place the @import in the CSS Section of the JSFiddle. (Don’t bring over the <style> tags.)

Step 6. Now that you have the font imported, you can use it on the website. Write the CSS to add the font to everything in the website body, using “body” as the selector with the font-family property.  (You will see the font-family code in Google Fonts. You only need the font-family.)

The code in your CSS will look something like this, but with your fonts. By selecting the body, the font will be in use on the entire website.

Want to try two fonts? Go back to Google Fonts and choose a second font, something decorative or eye-catching for your headings. Add it to your @import, then override just h1 and h2 with the new font. Your body text should stay in the easy-to-read font.

Tips for Choosing Fonts

• Limit yourself to 2 fonts per site. Too many create visual chaos and slow load times.
• Pair a serif with a sans-serif for a classic, readable combination (e.g., Playfair Display for headings, Roboto for body text).
• Only load the weights you need. Each additional weight adds to the file size visitors must download.
• Always include a fallback in your font stack (sans-serif or serif).

💡 If you are making a website template: Add a Google Font to your template’s style.css. See the full website template guide for reference.

❓ Frequently Asked Questions