Why it matters
Typography sets the tone of a site before anyone reads a word, and pairing a characterful heading font with a calm body font is the quickest way to look professional. Seeing pairs with your own words is far more useful than a specimen sheet.
Where the fonts come from matters too. Loading them from a third-party font service sends every visitor's IP address to that company; in January 2022 a court in Munich ruled that doing so without consent breached GDPR. Hosting the files yourself avoids that and is usually faster. Every font here is open source and served from leej.uk, and the CSS is written for self-hosting.
How to use it
- Choose a pairing.
- Type your own heading and body text.
- Adjust the sizes, line height, weight and background.
- Copy the CSS, download the fonts from Google Fonts or Fontsource, and put them in your site's /fonts folder.
FAQ
Can I use these fonts on a client site?
Yes. All of them use the SIL Open Font License, which allows commercial use and self-hosting. You can't sell the font files on their own.
Why self-host fonts?
No visitor data goes to a third party, you control caching, and the browser doesn't need to connect to another server before showing text.
What does font-display: swap do?
It shows text straight away in a fallback font, then swaps in the web font when it has loaded, so nobody stares at a blank page.
Why are the system font pairs there?
System fonts load instantly because they're already on the device. They're a great choice for apps, dashboards and fast, plain sites.
Credits and licences
Preview fonts are self-hosted on leej.uk under the SIL Open Font License 1.1 (licence and copyright notices): DM Sans, DM Serif Display, Fraunces, Inter, Lora, Merriweather, Montserrat, Playfair Display, Source Sans 3 and Space Grotesk, each © its authors. No request is made to Google Fonts or any other font service.
