How to choose a font for a website: A practical checklist
Choosing a font for a website involves a few practical constraints that don’t apply nearly as much to print or a one-off logo. Here’s the checklist worth working through before you commit.
Start with legibility at your real size, not a big preview
Font specimen pages almost always show a typeface at a large, generous size, which tells you very little about how it reads at 16 or 17 pixels, the size most body text actually renders at. Before anything else, set a full paragraph of your own real copy at the exact size you plan to use and read it properly, ideally on both a phone screen and a desktop monitor.
Work out how many weights you actually need
Most websites need far fewer font weights than a typeface family offers. A regular weight for body text and a bold weight for headings and emphasis covers the majority of sites; a medium weight for buttons or labels rounds it out for most of the rest. Every additional weight you load is a separate file your visitor’s browser has to download, so resist the temptation to grab five weights “just in case.”
Think about loading performance from the start
Font files add real weight to a page, and how you load them matters. Self-hosting keeps every font request on your own domain, with no separate connection to a third-party server required at all, which is both a performance and a privacy plus. Loading from a service like Google Fonts is perfectly viable too and offers convenient caching, but it does mean a visitor’s browser connects to an outside server just to render your text.
Check language and character support
If your site publishes in more than one language, or you expect visitors typing accented characters or non-Latin scripts, check the specific font’s language support directly rather than assuming. Not every free or paid font includes broad character coverage, and discovering a gap after launch is a far more annoying fix than checking beforehand.
Don’t skip the fallback stack
Even a perfectly chosen web font needs a sensible fallback list in your CSS, a similar system font that renders correctly for the rare visitor whose browser can’t load your primary choice for any reason. A thoughtful fallback keeps your site legible for everyone, not just the majority case.
Test it like a real page, not a mockup
Once you’ve narrowed things down, the final check is simple: build the real page, or something close to it, and read it the way an actual visitor would. Our Type Tester is a fast way to compare candidates side by side using your own headline and body copy before you commit to writing the CSS, and our guide to pairing fonts covers what to put alongside your chosen body font for headings and other roles.
Frequently asked questions
What should I check before choosing a website font?
Check legibility at your actual body text size, how many weights you genuinely need, file size and loading performance, and whether the font supports every language your site needs, before checking whether you simply like how it looks.
How many font weights does a website actually need?
Most sites need no more than two or three: a regular weight for body text, a bold weight for emphasis and headings, and occasionally a medium weight for UI elements like buttons or labels. Loading more weights than you use adds real page weight for no benefit.
Does font choice affect website loading speed?
Yes, directly. Every font weight and style you load is a separate file your browser has to download before it can render that text, so an unnecessarily large font selection can measurably slow a page down.
Should I self-host fonts or load them from Google Fonts?
Both are legitimate options. Self-hosting keeps every request on your own domain and avoids a third-party connection entirely, while Google Fonts offers convenient hosting and caching. Self-hosting is the more privacy-conscious default, and it's what this site itself uses.
What's the safest font size for website body text?
Most body text reads comfortably between 16 and 18 pixels on desktop, with mobile sizing kept close to the same range rather than shrunk down, since small text is one of the most common real usability problems on websites.
How do I test a font before committing to it for a whole website?
Set your actual homepage headline and a full paragraph of real body copy in it, not placeholder text, at the exact sizes you plan to use, and read it on both a phone screen and a desktop monitor before deciding.
Do web fonts need to support every language my site uses?
Yes, if you publish in more than one language or expect visitors typing accented characters, special punctuation, or non-Latin scripts. Not every free font includes broad language coverage, so this is worth checking directly on the font's own specimen page.
Is it fine to use a system font instead of a custom web font?
Completely fine. System fonts (relying on whatever font is already installed on a visitor's device) load instantly with zero extra download, which is a real, valid performance-first choice, especially for a site where speed matters more than a highly distinctive typographic voice.