Font Preview
Type your own text and compare a curated set of Google Fonts side by side at any size, weight and color. Copy the @import or font-family CSS.
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Fonts are loaded from Google Fonts, so Google receives your IP address and the names of the fonts shown. Your preview text is not sent.
About the Font Preview
Font specimen pages show a typeface with sample text somebody else chose. When you are picking a font for a heading, a logo or a website, it helps more to see your own words in several fonts next to each other. This tool lets you type a line of text and renders it in every font you select, at the same size, weight and colors, so the comparison is fair.
The list contains 59 popular Google Fonts, grouped as Sans-Serif, Serif, Display, Handwriting and Monospace. Use the search box and the category menu to narrow it down; every name is displayed in its own font. Click a name to add it to the comparison, or click one of the eight suggested heading and body pairings to load both fonts at once. Each preview card also shows the font from Light to Bold and its capital letters, lowercase letters, digits and common symbols.
The fonts are loaded from Google Fonts. Your browser downloads the stylesheets from fonts.googleapis.com and the font files from fonts.gstatic.com, which means Google receives your IP address and the names of the fonts being loaded. The preview text you type is not part of those requests and stays on your device.
When you have decided, the @import button copies a line to paste at the top of your CSS, and the CSS button copies a matching font-family declaration with a generic fallback (serif, sans-serif, monospace or cursive). If your text and background colors are close, check them with the Contrast Checker, and try the code in the Live Code Editor.
How to use the Font Preview
- 1
Type your text
Enter a headline, brand name or sentence in Preview Text.
- 2
Set size, weight and colors
Use the Size (12–72 px) and Weight (100–900) sliders and the Text Color and Background pickers.
- 3
Choose fonts
Click fonts under Browse Fonts, using the search box and category menu, or click a suggested pairing.
- 4
Compare and copy
Review the cards under Selected Fonts. Click @import or CSS to copy code, or Remove to drop a font from the comparison.
What it can do
Your own text
Every selected font renders the same preview text at the same size, weight and colors.
Curated list in five categories
Sans-serif, serif, display, handwriting and monospace fonts with search.
Eight suggested pairings
Heading and body combinations such as Playfair Display with Lato or Montserrat with Open Sans.
Weights and characters
Each card shows Light to Bold samples plus letters, digits and symbols.
Copy-ready CSS
An @import line for weights 400–700 and a font-family declaration with a fallback.
Limitations
- Only the 59 fonts in the built-in list are available; you can’t search the full Google Fonts catalog or upload your own font.
- Not every font has every weight. When a weight is missing, the browser shows the nearest one or synthesizes bold, so the Weight slider may change little for some fonts.
- An internet connection to Google Fonts is required. If it is blocked by a network filter or browser extension, previews fall back to a default font.
- The copied @import line requests weights 400, 500, 600 and 700; edit it if you need others. Google Fonts only returns the weights a family actually has.
Privacy
Font stylesheets and font files are loaded from Google Fonts (fonts.googleapis.com and fonts.gstatic.com), so Google receives your IP address and the names of the fonts displayed. The text you type and your color choices stay in your browser.
Frequently asked questions
Does Google see the text I type?
No. The requests to Google Fonts only contain font family names and weights. Your preview text is rendered locally and isn’t sent anywhere.
How do I use a font I picked on my website?
Click @import and paste the line at the very top of your CSS file, then click CSS and add the font-family declaration to the elements you want to style. You can also download the font from Google Fonts and host it yourself.
Why doesn’t the weight slider change some fonts?
Many display and handwriting fonts, such as Pacifico, come in a single weight. The browser can only show weights that exist, apart from a synthetic bold.
Which fonts pair well together?
A common approach is to combine a distinctive heading font with a calm, readable body font, for example a serif heading with a sans-serif body. The suggested pairings are starting points; judge them with your own text and sizes.
Can I preview a font that isn’t in the list?
No. The tool uses a fixed selection of 59 fonts. For other fonts, use the Google Fonts website or install the font on your computer.
Ratings & Reviews
Rate Font Preview
Help others by sharing your experience. Your rating is shown without your name.
More Design Tools
View all →Color Picker
Pick a color and copy it as HEX, RGB or HSL
Color Palette Generator
Generate five-color palettes from color-harmony rules or at random
Colorblind Simulator
Approximate how an image looks with seven types of color blindness
Contrast Checker
Check the WCAG contrast ratio between text and background colors