Importing fonts

There are three ways to get a font onto a page, and they trade convenience against speed and privacy.

1. Host the file yourself

@font-face {
	font-family: "My Font";
	src: url("myfont.woff2") format("woff2");
	font-display: swap;
}

Then use font-family: "My Font" as normal. The name in @font-face is one you invent.

This is what I do. It’s the fastest, it doesn’t hand your visitors’ data to anybody, and the font can’t vanish because someone else changed their service.

Use .woff2 ~ it’s the smallest format and every browser supports it.

2. A hosted service

Google Fonts and friends give you a <link> to paste in. Easy, and completely fine to start with. It does mean an extra connection to somebody else’s server before your text can render.

3. System fonts

font-family: system-ui, sans-serif;

No download at all ~ you get whatever the reader’s device already uses. Instant, and it always feels native. Underrated!

Two things that will bite you

Always list a fallback. font-family: "My Font", system-ui, sans-serif ~ if the file fails to load, you still have text.

Always set font-display: swap. Otherwise browsers may hide your text entirely while the font downloads, and blank text is worse than the wrong font.

Try it here

Drag a .woff2 file straight onto this editor, uncomment the @font-face block, and change the filename to match.