Custom fonts and Google Fonts on your website: the right way
A font changes the whole mood of a page. It can also make the page slower, hide text while loading, or — in the EU — raise a privacy question. Here is how to get the look without the problems.
Two ways to use a font
Load it from Google Fonts. The page links to Google's servers, and the font is downloaded from there. It is the easiest way, and AI agents often choose it.
Host the font files yourself. The font files are part of your site and are published with it. Slightly more setup, but no outside requests.
Why self-hosting is often better
- Privacy. When a page loads a font from Google, the visitor's browser connects to Google and shares their IP address. In 2022 a Munich court ruled that one site doing this without consent broke EU data protection rules; the wider question is still before the courts. More and more sites have switched to self-hosted fonts since.
- Speed. No waiting for Google's servers, as long as your files stay small (see below).
- Independence. The site does not depend on an outside service.
Use WOFF2
WOFF2 is the compressed web font format that all modern browsers support. aiput.site publishes WOFF and WOFF2 files. It does not publish TTF or OTF — the desktop formats — and a publication with them is refused. Convert them first.
Download the fonts used on the page, convert them to WOFF2, put them in a fonts folder and change the CSS so the site uses these files instead of Google Fonts. Keep only the weights actually used on the page.
Keep it light
- Two fonts at most: one for headings, one for text. Often one is enough.
- Only the weights you use. Regular and bold, maybe semibold. Each extra weight is usually another file to download.
- Only the characters you need. A font with every script in the world is heavy; ask for only the characters your site's languages need, and name the languages.
- Show text while the font loads: the CSS rule
font-display: swapmakes the browser show a system font first, then switch.
Check the licence
Google Fonts are free to use on websites, including self-hosted. Fonts you bought or downloaded elsewhere may need a separate web licence: a desktop licence usually does not cover putting the files on a website. Check before you publish.
System fonts: the fastest option
The fonts already on the visitor's device cost nothing to load. A modern system font stack looks clean on every platform and is a good choice for text, with a custom font only for headings.
For more on page speed, see how to prepare images — images and fonts are often most of what a simple landing page weighs.