How Many Fonts Should a Website Have?

I think a website should have one or two typefaces, mostly one family which carries the navigation, the body text and the buttons, and optionally a second display face for the large headings, used in three or four weights and about six sizes. Every weight and every italic is another file which the browser downloads, so the count which matters is the number of files and not only the number of families. This website used four families until September, Sora, Inter, Overpass Mono and Instrument Serif, and it now uses one, Inter Tight, from a single variable file of about 45 KB which covers every upright weight from 400 to 600, plus a 23 KB italic for the one accent line.

This post goes through what a second typeface should do, why weights and sizes are the real count, what each font file costs, and three websites from my portfolio which use one, two and three families.

One or two typefaces, and a job for each

Apple’s guidance on typography puts it in one line, “Minimize the number of typefaces you use, even in a highly customized interface.” The big design systems follow that. Material Design builds its type scale on Roboto by default, IBM’s Carbon uses its own IBM Plex family in sans, serif and mono versions with three suggested weights, and the GOV.UK Design System sets its services in its own typeface in two weights, regular and bold.

A second typeface is worth adding when it has a job which the first one cannot do, which is mostly giving the headings a character of their own, such as a serif for a clinic or a law firm. Google Fonts’ guide to pairing typefaces makes the same point the other way round, asking whether a second face is needed at all before the weights, widths and styles of the first are used up. A third family mostly makes sense for figures, such as a monospaced face for prices, account numbers or tables, and beyond that I find each new face takes something away from the others.

Count weights and sizes, not only families

One family in seven weights with italics can look busier than two families in two weights each, so I would count every combination of family, weight and style which appears on the site. Material’s baseline scale has five roles, display, headline, title, body and label, each in three sizes, and its own guidance notes that most products will not need all fifteen of those styles. For a business website, about six sizes cover everything.

That table uses at most two families and three weights, regular, medium and semibold, which is the set this website uses, at 400, 500 and 600, so headings and body text read as the same voice and the labels are set apart by weight and letter spacing.

What each font file costs

The HTTP Archive’s 2025 Web Almanac found web fonts on 88% of mobile pages, and its page weight chapter measured the median mobile home page at three to four font files and 122 KB of fonts, noting that every extra weight and style is usually a separate download. Its fonts chapter puts the median single font file at about 35 KB and shows variable fonts on 41.3% of mobile sites, up from 34% a year before.

A variable font holds several weights in one file, and MDN’s guide to variable fonts explains that it replaces the separate files for each weight and width. The file is larger than one static weight, so web.dev’s best practices for fonts, which opens its advice with using fewer web fonts, notes that the gain is biggest when a site needs several weights. This website’s single variable file of about 45 KB replaces what would otherwise be three static files, and since 28 September it is served from the site itself, because the Google Fonts stylesheet was holding up the first paint from a third server. The extended Latin set, 90 KB, only loads on a page which has a character in its range, and the peso sign on the local pages has a one-glyph file of its own of 1.2 KB, so those pages skip the 90 KB file for one character.

While a font loads, font-display: swap shows the text in a fallback font straight away and swaps the web font in when it arrives, as MDN’s page on font-display describes, so fewer files also means less of the jump when the fonts swap.

One, two and three families in practice

These are three website concepts from my portfolio, each with a different count, and I think each one is right for its brand.

One family, a dental group

Fairday uses Asta Sans for everything, the headings, the prices, the booking steps and the buttons, so the site reads as calm and practical, which suits a family dentist whose pitch is a written price beside every service. The wordmark uses the same face in its medium weight.

Two families, a skin clinic

Softglow sets its headings in Libre Caslon Display and everything else in Hanken Grotesk, so the serif carries the clinic’s care and the sans keeps the treatment lists, prices and forms easy to scan. The display face only appears at heading sizes, where its thin strokes have room.

Three families, a finance company

Ampersand uses Hedvig Letters Serif for display headings, Figtree for the interface and body, and Geist Mono for the ledger details, because a treasury product shows a lot of figures which line up better in a monospaced face. It’s really the upper limit, I suppose, and it works because each family has one job which the other two do not touch.

My post on choosing a headline font for a website covers how I picked the display faces for the second and third, and the full designs are on my projects page.

Sizes and accessibility

WCAG sets no minimum font size, but two of its rules shape how the type is built. Resize text asks that text can be enlarged to 200% without losing content, and text spacing asks that nothing breaks when people increase the line height, letter spacing and word spacing, so headings which are set very tight, or containers with a fixed height, need room to grow. I would set body text at 16 pixels or more and check every typeface at 200% before committing to it, since condensed display faces mostly fail first.

Where to start

Open your website in Chrome, open the developer tools, choose the Network tab and filter by Font, then reload the page, and the list shows every font file which the page downloads with its size. If you count more than four or five files, I would look for weights which appear only once, an italic which nobody uses, or a second family which only shows up in the footer, and remove them. The same restraint works for colour, which my post on how many colors a website should have goes into.

Frequently asked questions

How many fonts should a website have?

One or two typefaces, with a third only for a specific job such as figures in a monospaced face, used in three or four weights, so the browser downloads as few as two to four font files.

How many font sizes should a website have?

About six, a display size for the page heading, a section heading, a card heading, the body, small text and a label size for buttons and navigation, with a smaller set on phones.

Is it bad to use more than two fonts on a website?

Mostly yes, since each family needs its own job to earn its place and its own files to load, and a third family works only when it does something the other two cannot, such as lining up numbers.

Do fonts slow down a website?

Each font file is another download, about 35 KB at the median, so a site with eight weights and italics loads several times more than one with a single variable file, and the text can shift when the fonts swap in.

Should I host fonts myself or use Google Fonts?

Both work, and serving the files from your own site saves a connection to another server before the text can appear, which is why this website switched to its own copies of the same Google Fonts files.