Fonts I use

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.

Cubano, heavy and confidentHeavy display and titles. Paid, so this preview falls back to Alata · Lost Type

Marcellus SC, quietly formalFormal headings, professional without looking corporate · Google Fonts

Lacquer, ink bleeding at the edgesHorror and posters, anything that should look damaged · Google Fonts

Alata, plain and modernDisplay and UI when you want no personality at all · Google Fonts

Reem Kufi, geometric and openDisplay, and the only one here covering Arabic · Google Fonts

Cubano is the one from Fireship's videos.

Body and interface

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

Sen, clean at small sizesInterface text and small sizes · Google Fonts

Lexend, built for easier readingBody text where reading speed matters more than styling · Google Fonts

Rubik, soft corners, friendlyInterface work that should feel approachable · Google Fonts

Outfit, geometric and evenDisplay and UI, very even colour across a line · Google Fonts

Neuton, a serif that stays lightLong body copy, light enough to sit beside a sans · Google Fonts

Sofia Pro, warm geometric sansWarm geometric UI. Paid, so this falls back to Sen. Sofia Sans is the free stand in · MyFonts

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.

Kalam, marker on paperHandwriting, and the only one covering Devanagari · Google Fonts

Caveat, quick margin notesAnnotation on diagrams, reads as a note not decoration · Google Fonts

Indie Flower, round and casualCasual handwriting, rounded and even · Google Fonts

Gloria Hallelujah, looping and loudComic and playful handwriting · Google Fonts

Schoolbell, small and scratchyScratchy handwriting, works small · Google Fonts

Loading them

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

<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.

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

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