---
title: Fonts I use
description: The typefaces I keep coming back to, what each one is good for, previews of all of them, and the Google Fonts link to load them.
tags: [design, fonts, typography, css]
---

A shelf of typefaces worth remembering, so I stop rediscovering the same ones.
Each is grouped by the job it does, with a preview and where to get it. All but
two are free on Google Fonts.

## Display and headings

Big, short, and meant to be looked at rather than read for minutes.

<p className="font-sample f-cubano">Cubano, heavy and confident<span className="meta">Heavy display and titles. Paid, so this preview falls back to Alata · <a href="https://losttype.com/font/?name=cubano" rel="noreferrer noopener" target="_blank">Lost Type</a></span></p>

<p className="font-sample f-marcell">Marcellus SC, quietly formal<span className="meta">Formal headings, professional without looking corporate · <a href="https://fonts.google.com/specimen/Marcellus+SC" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-lacquer">Lacquer, ink bleeding at the edges<span className="meta">Horror and posters, anything that should look damaged · <a href="https://fonts.google.com/specimen/Lacquer" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-alata">Alata, plain and modern<span className="meta">Display and UI when you want no personality at all · <a href="https://fonts.google.com/specimen/Alata" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-reem">Reem Kufi, geometric and open<span className="meta">Display, and the only one here covering Arabic · <a href="https://fonts.google.com/specimen/Reem+Kufi" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

Cubano is the one from Fireship's videos.

## Body and interface

Made to be read in long runs or at small sizes.

<p className="font-sample f-sen">Sen, clean at small sizes<span className="meta">Interface text and small sizes · <a href="https://fonts.google.com/specimen/Sen" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-lexend">Lexend, built for easier reading<span className="meta">Body text where reading speed matters more than styling · <a href="https://fonts.google.com/specimen/Lexend" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-rubik">Rubik, soft corners, friendly<span className="meta">Interface work that should feel approachable · <a href="https://fonts.google.com/specimen/Rubik" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-outfit">Outfit, geometric and even<span className="meta">Display and UI, very even colour across a line · <a href="https://fonts.google.com/specimen/Outfit" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-neuton">Neuton, a serif that stays light<span className="meta">Long body copy, light enough to sit beside a sans · <a href="https://fonts.google.com/specimen/Neuton" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-sofia">Sofia Pro, warm geometric sans<span className="meta">Warm geometric UI. Paid, so this falls back to Sen. Sofia Sans is the free stand in · <a href="https://www.myfonts.com/collections/sofia-pro-font-mostardesign" rel="noreferrer noopener" target="_blank">MyFonts</a></span></p>

Lexend is the one worth knowing about: it was drawn around reading proficiency
rather than looks, which is a different design goal from everything else here.

## Handwriting

Different enough from each other to be worth keeping all five.

<p className="font-sample f-kalam">Kalam, marker on paper<span className="meta">Handwriting, and the only one covering Devanagari · <a href="https://fonts.google.com/specimen/Kalam" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-caveat">Caveat, quick margin notes<span className="meta">Annotation on diagrams, reads as a note not decoration · <a href="https://fonts.google.com/specimen/Caveat" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-indie">Indie Flower, round and casual<span className="meta">Casual handwriting, rounded and even · <a href="https://fonts.google.com/specimen/Indie+Flower" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-gloria">Gloria Hallelujah, looping and loud<span className="meta">Comic and playful handwriting · <a href="https://fonts.google.com/specimen/Gloria+Hallelujah" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

<p className="font-sample f-school">Schoolbell, small and scratchy<span className="meta">Scratchy handwriting, works small · <a href="https://fonts.google.com/specimen/Schoolbell" rel="noreferrer noopener" target="_blank">Google Fonts</a></span></p>

## Loading them

Every Google Fonts one in a single request. This is the same URL the preview
block above imports.

```html
<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=Alata&family=Caveat:wght@400;700&family=Gloria+Hallelujah&family=Indie+Flower&family=Kalam:wght@300;400;700&family=Lacquer&family=Lexend:wght@300;400;600&family=Marcellus+SC&family=Neuton:wght@300;400;700&family=Outfit:wght@300;400;600&family=Reem+Kufi:wght@400;600&family=Rubik:wght@300;400;600&family=Schoolbell&family=Sen:wght@400;700&display=swap"
  rel="stylesheet">
```

Never ship this whole list to a real page. It is a catalogue, not a stylesheet.
Pick the one or two you are actually using and request only those weights,
because every extra family is another file the browser waits on.

`display=swap` shows fallback text immediately and swaps the real font in when
it arrives, which avoids a stretch of invisible text on a slow connection.

On Next.js, `next/font/google` is the better route. It downloads the files at
build time and serves them from your own domain, so there is no request to
Google at runtime and no layout shift.

```js
import { Lexend } from 'next/font/google'

const lexend = Lexend({ subsets: ['latin'], weight: ['400', '600'] })
```