What Are Webfonts and Why Use Them?
A webfont is a font file your website sends to the visitor’s browser. It means your text looks the way you designed it, even if the visitor has never installed that font.
How webfonts work
When someone opens your page, the browser reads your CSS, sees which font is needed and downloads the file from your server. It then draws your text with that font. All of this happens automatically, and the visitor doesn’t install anything.
Webfonts or system fonts?
System fonts are already on the visitor’s device, such as Arial, Georgia or San Francisco. They need no download, so they’re the fastest option. Their drawback is that the look changes from one device to the next, and few of them will match your brand.
- Choose a webfont when your brand, headings or design depend on a particular typeface.
- Choose system fonts when speed matters most, such as in dashboards or internal tools.
- Mix them by using a webfont for headings and a system font for body text.
What do webfonts cost in speed?
Each font file is one more download, and text can appear late or jump while it arrives. A well-prepared webfont keeps that cost small. Use WOFF2, remove characters you don’t need, and load only the weights you use. Our guide to making webfonts load faster covers each step.
Self-hosted or a font service?
Services such as Google Fonts and Adobe Fonts host the files for you. Self-hosting means keeping them on your own server. It gives you control over caching and speed, and it means visitors’ browsers don’t contact a third party. That can matter for privacy: in 2022, a German court ruled against a site that loaded Google Fonts from Google’s servers without consent.
Before you self-host, read the font’s license. Our webfont licensing guide explains what to look for.
Getting started
Take a font you’re licensed to use and run it through the Webfont Generator. You’ll get web-ready files and CSS, and our guide shows how to add them to your site.
