Font Preview Tool
Type your own text, pick a font from the list and adjust size, weight, spacing and colour. See it in every size, then copy the CSS.
Inter · 400
The quick brown fox jumps over the lazy dog
See it at every size
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#%$*
Use it on your website
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Inter:400&display=swap" rel="stylesheet">
/* CSS */
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 56px;
line-height: 1.25;
letter-spacing: 0px;
color: #0f172a;How to preview a font
- Type your own words in the Custom text box (up to 200 characters).
- Search the font list or filter by style: Sans, Serif, Display, Handwriting or Mono.
- Pick a font, then change its size, weight, letter spacing, line height, alignment and colours.
- Look at the preview at eight sizes from 12 px to 64 px, then copy the CSS.
The list holds more than 80 popular Google Fonts, and each row shows your text in that font so you can compare quickly.
Font categories and where they fit
| Category | Character | Examples in the list |
|---|---|---|
| Sans | Clean and modern; suits interfaces and body text | Inter, Roboto, Montserrat |
| Serif | Traditional and readable in long text | Playfair Display, Merriweather, Lora |
| Display | Bold, attention-grabbing headings | Bebas Neue, Anton, Abril Fatface |
| Handwriting | Personal and informal | Caveat, Pacifico, Kalam |
| Mono | Equal-width characters for code | Roboto Mono, Fira Code, JetBrains Mono |
Weight, letter spacing and line height
Weight controls how bold the letters are, and only the weights a font actually offers are listed. Letter spacing adds or removes room between characters: slightly tighter spacing often suits large headings, while small text benefits from a little extra. Line height is the space between lines. For body text, around 1.5 is a comfortable starting point, and accessibility guidance (WCAG 1.4.12) expects layouts to cope with a line height of at least 1.5. Very long lines are hard to read at any font size.
Pairing fonts
A dependable approach is to pair a distinctive heading font with a neutral body font, and to use no more than two families. Playfair Display for headings with Source Sans 3 for text, or Montserrat headings with Lora body text, are classic contrasts. Preview both with the same wording and check that the sizes and weights feel balanced before you commit.
Using a font on your website
Under the preview you will find a ready-made link tag and CSS rule with the family name and fallback fonts. Only the weights you select are requested, which keeps pages fast, and the link uses display=swap so text stays visible while the font loads. Google Fonts are open source and free for personal and commercial use. Loading fonts from Google means a visitor’s browser contacts Google’s servers, so some sites download the font files and host them themselves.
Testing readability with your real content
Use the words your project will actually contain, including numbers, capital letters and any long headings, because some fonts look better in a sample sentence than in your text. Your text stays in your browser; the only network request is for the font files you preview. If you want to use handwriting fonts for a design straight away, the notes maker includes several, and the invoice generator lets you choose a font for your documents.
Frequently Asked Questions (FAQs)
Type or paste your text in the Custom text box. The font list on the left and the large preview on the right both update, so you can compare many fonts quickly.
Every font in the list comes from Google Fonts, which are open source and free for personal and commercial use on websites, apps, print and video.
Copy the ready-made link tag and CSS shown under the preview and paste them into your site. Only the weights you select are loaded, which keeps pages fast.
Weight changes how bold the letters are (when the font offers several weights). Letter spacing adds or removes room between characters, and line height controls the space between lines of text.
No. Your text stays in your browser. The only network request is to Google Fonts to download the font files you choose to preview.
Type your own text in the box and click through the list. This font tester updates the preview and every font in the list at once, using your custom text.
The list shows your text in each font, so you can scan many at once and click one for a large preview with all sizes.
Choose a font and weight, then press Copy code. You get the link tags and CSS for that font.