Preview your own text in 60 Google Fonts
Font Preview shows a phrase of your choice set in 60 popular families from the Google Fonts library, so you can judge a typeface on the words you actually plan to use — a brand name, a headline, a line of code — instead of a stock pangram. It suits web designers choosing a heading and body font, developers picking a coding font for slides or documentation, and anyone making a poster, invitation or logo draft who wants to see options side by side. When you have chosen, the page gives you the HTML or CSS needed to load that font on a website.
How to use it
- Replace the sample sentence in the preview box with your own text. Every card updates as you type.
- Set Size (12–72 px), Weight (300 Light to 700 Bold), text Color and background (BG) to match the context you are designing for, such as light text on a dark banner.
- Narrow the list with the search box (it matches font names) or the category buttons: Sans-Serif, Serif, Display, Handwriting and Monospace.
- Press Compare on two or three cards, then the Compare (n) button in the toolbar to see them stacked with identical settings. The limit is three fonts at a time.
- Press Get CSS on a card to open the code panel. Choose the <link> Tag version (for your HTML head) or the @import version (for a stylesheet), then Copy.
How it works and what is sent to Google
The page itself contains only a list of font names and categories. To draw a card, it adds a stylesheet link to fonts.googleapis.com asking for that family in weights 300 to 700; Google's stylesheet then makes your browser download the font files from fonts.gstatic.com. With the "All" filter, that happens for all 60 families shortly after the page opens, which is why cards can flicker from a fallback font to the real one on a slow connection. If Google rejects the multi-weight request for a family, the page retries with the family's default style.
Those requests contain the family names and weights, not your preview text: the text is rendered locally and never leaves the page. As with any site that uses Google Fonts, Google receives the normal request details, such as your IP address and browser user agent. The page stores nothing on your device.
Using the generated code
The snippet requests only the weight currently selected in the Weight menu, plus display=swap so text stays visible while the font loads. If you need several weights (say 400 for body text and 700 for headings), edit the URL to list them, for example wght@400;700. Many display and handwriting families, such as Lobster or Pacifico, come in a single weight; if you pick a weight a family does not offer, the generated URL may be rejected by Google Fonts or the browser may fake the weight, so check the family's available styles on Google Fonts before publishing. For best performance, load as few families and weights as you can, and consider self-hosting the files if your privacy policy or audience requires that no requests go to Google.
Frequently asked questions
Are these fonts free for commercial use?
Fonts in the Google Fonts library are released under open licences, mostly the SIL Open Font License, which allows commercial use in websites, print and apps. The licence travels with each family, so check the specific font's page if you plan to modify or redistribute the font files.
Why does a card show a plain system font?
Either the font is still downloading, your network or an extension is blocking Google Fonts, or the family has no glyphs for the characters you typed. Most of these fonts cover Latin script only, so Chinese, Arabic or other scripts will fall back to a system font.
Can I preview fonts installed on my computer?
No. The tool only lists the 60 Google Fonts families built into the page. Search matches those names, not fonts installed locally.
Should I use the <link> tag or @import?
The <link> tag, together with the preconnect hints in the snippet, usually starts the download sooner. @import is convenient when you can only edit a CSS file, but it is discovered later and can delay text rendering slightly.