What is the best font for a website?

For the text, one that stays clear at small sizes and comes as one variable file: Google Sans and Inter lead our picks, Google Sans with every weight from 400 to 700 on one axis. For headings, a heavier weight of the same family, or one of the family pairs on this page.

Can I host these fonts on my own server?

Yes. Every licence here lets you serve the files from your own server instead of the library they come from. WOFF vs WOFF2 says which file to serve.

What is a variable font?

One file with axes instead of a file per style: its weight axis runs from the thinnest weight the family draws to the boldest, and CSS can ask for any value between, such as font-weight: 450. Every pick here has one; 10 also have a width or optical size axis.

Which fonts go together on a website?

We list only pairs drawn to go together: a sans serif and a serif our lab links as one family, with a designer in common, such as Roboto with Roboto Slab, and for code samples a sans serif and a monospace, such as Google Sans with Google Sans Code.

Are these fonts free for commercial websites?

Yes, for a client’s site, a shop or a product, at any traffic: all 18 come under the SIL Open Font License. None of them charges by page views or visitors.

Do these web fonts cover other languages?

All have Latin Extended, for languages such as Polish, Czech and Turkish written in Latin letters. Of the 18, 12 also have Cyrillic, 7 Greek and 16 Vietnamese.

Best fonts for websites

For a website, pick a variable text face, so one file holds every weight, with italics and Latin Extended letters for names in other languages. Google Sans, Inter, Open Sans and Roboto lead the sans serifs and Merriweather and Bitter the serifs; every licence here lets you host them yourself.

Pass the rule: 76 of 2,035; of all the fonts we measured
Shown: 18; the most used first, one of a family
Commercial use: 18 of 18; every licence here allows it
In Google Docs: 17 of 18; most likely, under More fonts; Slides too

01 / The picks

18 fonts for websites

A plain text face with a weight axis, italics and Latin Extended letters, an x-height of 50% of the em or more and contrast of 2.2 : 1 or less.

Sans serifs

68 pass · 12 shown

Set the first 6 in your own words

Serifs

8 pass · 6 shown

Set these 6 in your own words

02 / Pairs

Pairs drawn as one family

A sans serif with a serif, or with a monospace for code, that our lab links as one family and that share a designer.

We pair only fonts made to go together, never two picked by eye: 6 pairs of a sans serif and a serif, and 6 of a sans serif and a monospace for code samples, most used first.

A sans serif and a serif

Roboto Roboto Slab
By Christian Robertson
Merriweather Sans Merriweather
By Sorkin Type
IBM Plex Sans IBM Plex Serif
By Mike Abbink, Bold Monday
Antic Antic Didone
By Santiago Orozco
Martel Sans Martel
By Dan Reynolds
Alegreya Sans Alegreya
By Juan Pablo del Peral, HT Fonts

A sans serif and a monospace

Google Sans Google Sans Code
By Google
Roboto Roboto Mono
By Christian Robertson
IBM Plex Sans IBM Plex Mono
By Mike Abbink, Bold Monday
Ubuntu Ubuntu Mono
By Dalton Maag
Geist Geist Mono
By Andrés Briganti, Mateo Zaragoza, Guillermo Rauch, Evil Rabbit, José Rago, Facundo Santana
Red Hat Display Red Hat Mono
By MCKL

03 / Questions

Web fonts, answered

What is the best font for a website?: For the text, one that stays clear at small sizes and comes as one variable file: Google Sans and Inter lead our picks, Google Sans with every weight from 400 to 700 on one axis. For headings, a heavier weight of the same family, or one of the family pairs on this page.
Can I host these fonts on my own server?: Yes. Every licence here lets you serve the files from your own server instead of the library they come from. WOFF vs WOFF2 says which file to serve.
What is a variable font?: One file with axes instead of a file per style: its weight axis runs from the thinnest weight the family draws to the boldest, and CSS can ask for any value between, such as font-weight: 450. Every pick here has one; 10 also have a width or optical size axis.
Which fonts go together on a website?: We list only pairs drawn to go together: a sans serif and a serif our lab links as one family, with a designer in common, such as Roboto with Roboto Slab, and for code samples a sans serif and a monospace, such as Google Sans with Google Sans Code.
Are these fonts free for commercial websites?: Yes, for a client’s site, a shop or a product, at any traffic: all 18 come under the SIL Open Font License. None of them charges by page views or visitors.
Do these web fonts cover other languages?: All have Latin Extended, for languages such as Polish, Czech and Turkish written in Latin letters. Of the 18, 12 also have Cyrillic, 7 Greek and 16 Vietnamese.