1,800+ free, open-source font families, served from a fast global CDN with one <link> tag. Typography is half of design — and this makes it free.
Every specimen below is a real Google Font loaded over the network. Edit the text and drag the size slider — all families update at once.
Google Fonts gives you a <link> tag listing the families and weights you want. Drop it in <head>, then reference the family in your CSS. That's the entire setup.
<!-- in <head> --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" rel="stylesheet"> /* in your CSS */ body { font-family: 'Inter', sans-serif; }
A single family ships many weights (300 → 800). You request the ones you need in the URL, then switch with font-weight. Drag to scrub through Inter's weights.
/* the URL asks for these weights */ family=Inter:wght@300;400;600;800 h1 { font-weight: 800; } body { font-weight: 400; }
Request italic styles with ital,wght@1,400. A classic combo: a serif display face for headings, a clean sans for body — both real Google Fonts here.
— with an elegant italic standfirst —
And the body copy in Inter, which is engineered for screen reading at small sizes. Pairing a high-contrast serif with a neutral sans is one of the most reliable type combinations on the web.
display=swap trickAdding &display=swap to the URL tells the browser to show text immediately in a fallback font, then swap in the web font when it arrives — so visitors never stare at invisible text while the font downloads.
FAST FONTS, NO BLANK SCREENS
fonts.googleapis.com <link> tag — five live families: Inter, Playfair Display, Roboto Mono, Lobster and Bebas Neue. The preview-text box and the size/weight sliders restyle the genuine downloaded fonts in real time. The shared CSS shell styles the surrounding page.