Web Fonts: Using Any Font You Like

A web font is a font file the browser downloads with your page, loaded with a Google Fonts link or your own @font-face rule, so every visitor sees the font you chose even when their device doesn't have it.

Apprentice · CSS · Updated

After this lesson you can

  • Load a web font from Google Fonts with link lines and use it in font-family
  • Load a font file with @font-face, using font-display: swap and a fallback

Key takeaways

  • A web font is downloaded with the page, so visitors see it even when it isn't installed on their device.
  • Google Fonts gives you link lines for the page's head. Then you name the font in font-family, with a fallback.
  • The @font-face rule names a font and points at its file, ideally a small .woff2 file kept with your site.
  • font-display: swap shows the fallback font right away and swaps in the web font when it arrives.
  • Check a font's license before you use it on a site. Every Google font is free to use, businesses included.

Sol Taco Truck's sign uses a chunky, rounded, friendly font that you'd recognize from across the parking lot. Put that font's name in font-family, and on most visitors' computers the website shows the browser's plain default font instead (or your fallback), because the font isn't installed there. Whenever a brand has its own font, a band's poster has a look you want to match, or your portfolio should feel like you, you need the font to travel with the page. This lesson shows the two ways to send it: a link to Google Fonts, and a font file of your own.

Why a font has to travel

Bring a board game to a friend's house and you can play it there, even if they don't own it. A web font (also called a custom font) works the same way: it's a font file the browser downloads along with your page, so every visitor can see it, whatever is installed on their device.

font-family alone can only use fonts the reader already has. A web font adds one step before it: tell the browser where the file is. After that, you use the font's name in font-family like any other, with fallbacks, as Fonts and Text: Family, Size, Weight and Spacing showed.

Google Fonts: a link and a name

Google Fonts (fonts.google.com) has more than a thousand fonts, all free. Pick one (the chunky taco-truck look is close to Lilita One), choose Get font, then Get embed code, and copy the link lines it shows into your page's <head>, above your own stylesheet's link:

<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=Lilita+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">

The first two lines are optional speed-ups: preconnect tells the browser to start connecting to Google's font servers early. The third line does the work: it loads a stylesheet from Google that describes the font. In its address, family=Lilita+One names the font (a + stands for each space), and display=swap is explained below. Then use the name in your own CSS:

h1, h2 {
  font-family: "Lilita One", "Arial Black", sans-serif;
}

The fallbacks still matter. They're what the reader sees while the font downloads, or if it can't be downloaded at all.

You can load several fonts, and several weights of one, in a single link: family=Lilita+One&family=Nunito:wght@400;700 loads Lilita One and the normal and bold weights of Nunito. Load only the weights you use, because each one is another file to download.

What the link really loads: @font-face

Open that Google address in your browser and you'll see the stylesheet it sends. Here is part of it, from a real request (one long line, a list of the characters the file covers, is left out):

/* latin */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lilitaone/v17/i7dPIFZ9Zz-WBtRtedDbYEF8RQ.woff2) format('woff2');
}

That's an @font-face rule, read "at font face". (The @ is read "at", and CSS rules that start with one are called at-rules.) It doesn't style anything on the page. It introduces a font: "there is a font called Lilita One, and its file is at this address." Once a font is introduced, any font-family can use it by that name.

Your own font file with @font-face

You can write the same rule yourself, with a font file kept in your site's own folder. The format to use is .woff2 (Web Open Font Format 2): a font squeezed down for the web, much smaller than the same font as a .ttf file. Fontsource (fontsource.org) has every Google font as .woff2 files to download, and font shops include web files when you buy a web license.

@font-face {
  font-family: "Sol Display";
  src: url("fonts/lilita-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2 {
  font-family: "Sol Display", "Arial Black", sans-serif;
}
  • font-family inside @font-face is the name you're giving the font. It can be any name, as long as your other rules use exactly the same one.
  • src is the path to the file, from the stylesheet, and format("woff2") says what kind of file it is.
  • font-weight and font-style say which weight and style this file is. A bold file gets its own @font-face rule, with font-weight: 700.

Keeping the file yourself means your page doesn't depend on another company's servers, and your visitors' browsers don't contact one.

Try it. In your sol-taco-truck folder, add the Google Fonts link lines for Lilita One to the <head>, and set it as the h1 and h2 font, with a fallback. Save, and the headings change to the chunky font. Then misspell the name in your CSS, as "Lilita On": the headings fall back to Arial Black (or the generic font), because the name has to match exactly.

While the font downloads: font-display: swap

A font file takes a moment to arrive. Until it does, what should the browser show? Without instructions, many browsers show the text invisibly for up to three seconds, so on a slow phone connection the menu has no words at all. font-display: swap says: show the fallback font right away, and swap in the web font as soon as it arrives. It's like a paper menu taped to the window while the painted board is on its way.

The swap can make the page shift a little when the new font comes in. Choose a fallback close in size and shape to your web font (a heavy font such as Arial Black for a chunky heading font), and the shift is small. Google Fonts' display=swap in the address adds font-display: swap to every rule it sends, as you saw above.

Licenses, and variable fonts

A font is software that someone designed, and it comes with a license. A font installed on your computer may be licensed for documents only, not for putting on a website. Before you use a font on a site, check what its license allows. Every font on Google Fonts is free and open source, mostly under the SIL Open Font License, so you can use them on any site, a business's included.

A variable font holds a whole range of weights in one file, from thin to extra bold, instead of one file per weight. Nunito is one: its Google Fonts address can ask for the whole range with family=Nunito:wght@200..1000 (read the .. as "to"), and then any weight in between works, such as font-weight: 650. In an @font-face rule of your own, a variable font gives its range as two numbers: font-weight: 200 1000;. One file, every weight: often a smaller download than three separate weights.

Check yourself

2 questions to try on the lesson page.

So what

The font is a big part of how a page feels, from a taco truck's friendly sign to a law firm's serious one. With a link or an @font-face rule, a fallback and font-display: swap, any font you're allowed to use can be part of your page, and the text is readable while it loads.

Key terms

Cheat sheets

Related