Preview a font in your browser
Preview an uploaded TTF, OTF, WOFF or WOFF2 file, or choose a browser font from the curated Sans-serif, Serif, Display, Monospace and System groups. Enter sample text and adjust the live preview. Uploaded font files are read in the browser and are not sent by this page.
How to use the font previewer
- Choose Upload a font file or Use a browser font.
- For an upload, drop one or more files into the drop area or browse for them. For a browser font, select a font from the list.
- Wait for the face to load, then select a face from the face list when you uploaded multiple files. The preview shows one face at a time.
- Adjust Sample text, size, weight, style, line height, letter spacing, text color and background.
- Use Copy CSS when the preview is ready. You can remove uploaded faces with their visible remove control.
Preview controls
Sample text accepts up to 600 characters. Change the size, weight, style, line height, letter spacing, text color and background to test the selected face. The Weight dropdown always provides standard 100-900 options. An uploaded face starts at its detected weight when that value is available in the list.
Font information and glyphs
Only uploaded TTF and OTF files are parsed for embedded metadata. The tool can show family and subfamily names, detected weight and style, format, file size, units per em, glyph count, version, designer and license information when those values are embedded. WOFF and WOFF2 files load for preview and show format and file size, but this implementation does not parse their embedded metadata or glyph data.
Character-set samples are shown for the active preview. The glyph grid is available only for uploaded TTF/OTF files: it reads supported code points from the font's cmap table and displays at most 300 of them. Browser fonts, WOFF files and WOFF2 files do not provide this grid.
CSS output and uploaded font paths
Copy CSS copies a CSS snippet for the selected face, including the current typography and color settings. For an uploaded font, the @font-face rule uses the uploaded filename as its src value. Edit that value to match the actual hosted font path before using the rule in another stylesheet.
Limitations, privacy and troubleshooting
- Selecting a Google font dynamically requests a stylesheet from
fonts.googleapis.com. System-font selections do not require that request. - Uploaded font files are read in the browser and are not sent by this page. The implementation does not define a maximum file size or maximum number of uploaded files.
- Unrecognized or unreadable files show an in-page error. A face may remain marked
(loading...)if FontFace loading fails. - Copy CSS can show
Copy failedwhen clipboard writing is unavailable. - The page does not document browser compatibility requirements or a separate message for a failed remote Google Fonts stylesheet request.
Font previewer FAQ
Does this tool upload my font file?
Uploaded font files are read locally in the browser and are not sent by this page. Selecting a Google font does load a remote resource from Google Fonts.
Why is there no glyph grid for my font?
The glyph grid is available only for uploaded TTF/OTF files and displays at most 300 code points. Browser fonts, WOFF and WOFF2 files do not provide it.
Why don't all weights show up for my uploaded file?
The Weight dropdown contains 100-900 options, but one uploaded file is usually one weight and style cut. Upload each additional weight as a separate file to switch between them.
Can I compare two different fonts?
You can upload multiple faces and switch between them, but the tool previews one face at a time.
Does the copied CSS include my actual font file?
No. For an uploaded font, the copied @font-face rule uses the uploaded filename as its source path. Host the file yourself and edit that path to match.