How to Check a Font File Before You Put It on Your Website

Most font problems on a website are not caused by CSS. They come from the file: a “Bold” that is really Semibold, a missing euro sign, two weights from different releases, or a license that only covers desktop use.

All of these are quick to catch before launch. This guide goes through what to check and how to check it with the FontPivot font viewer, which reads the file in your browser without uploading it.

What you need

• The font files you plan to use, or the originals you received.
• Some real content: product names, prices, people’s names, headings in every language your site uses.
• The license from wherever you got the font: the foundry, the distributor, or the open-source project.

Open the first file in the font viewer and work through the steps below. Repeat for each weight and style.

1. Format and file size

The viewer shows the format it reads from the file’s contents, which is more reliable than the file extension, and the file size.

• For a website you want WOFF2. If you have TTF or OTF, convert it, and keep the original. WOFF2, WOFF, TTF, or OTF? explains why.
• If the file is much larger than you expected, it may include characters for many languages your site does not use. Removing them is called subsetting; How to subset a web font shows how, the font subsetter does it in your browser, and web.dev covers it in Reduce web font size. Subsetting changes the font, so check that your license allows it.

2. Name and style

The Name and Style fields come from the font’s naming table, the same data your operating system shows. Check that each file is the one you think it is. Files called font-final-2.ttf are common, and it is easy to ship the wrong weight.

The name you use in @font-face is up to you, but give every weight and style of one family the same font-family and let font-weight and font-style tell them apart. How to self-host a custom font shows the full rule.

3. Weight

The Weight field shows the number stored in the font together with its usual name. The OpenType OS/2 table specification defines the common values:

Use that number as the font-weight in your @font-face rule. If the Bold file is declared with the wrong number, the browser may use the wrong file or draw a synthetic bold instead.

For a variable font, the viewer shows a range such as “100–900 (variable)” and lists each axis with its minimum, maximum, and default. Declare the weight range in your CSS (font-weight: 100 900;) and only use values inside it. MDN’s variable fonts guide explains the axes.

4. Version and designer

Version helps you spot mixed releases. If Regular says 2.100 and Bold says 1.004, they probably came from different downloads, and spacing or letter shapes can differ between them. Get all the files of a family from the same release.

Designer, when the font includes it, is a useful check that you have the font you meant to license, and not a lookalike with a similar name.

5. The characters your content needs

This is the check that most often finds a real problem.

The Characters field shows how many characters the font maps, and how many glyphs it contains. The full list is under “Characters in this font”. A large number does not mean every language is covered: a few hundred characters is often basic Latin plus some accented letters.

The faster check is to paste your real content into “Test your text”. When the text includes characters the font does not have, the viewer lists them under the preview. On your site, those characters would be drawn in a fallback font, which often looks like a typo.

Characters that are easy to forget:

• Punctuation: curly quotes ‘ ’ “ ”, the typographic apostrophe ’, en and em dashes – —, the ellipsis …
• Currency: € £ ¥ ₹ and any other currency you show
• People’s and place names: é ñ ü ø å ç, and for Central European names ł ś ż č ř ő
• Language-specific letters: German ß, Turkish ı İ ğ ş, Romanian ș ț
• Symbols: © ® ™ × → °, and superscript digits such as ² for units

If a character is missing, choose another font, get a version of the font that covers it, or make sure a similar fallback font follows it in your font-family stack.

6. License and copyright

When the font includes them, the viewer shows its license text, a license link, and the copyright notice under “License and copyright”. This is the information the font’s makers stored in the file’s naming table.

Treat it as a starting point, not the final word:

• The stored text can be missing, generic, or older than the license you agreed to. The license document from the place you got the font is what counts.
• Converting a font to WOFF2 does not change what its license allows.
• Font files also contain embedding flags meant mainly for documents such as PDFs. Current browsers do not enforce them for web fonts, and they are not a substitute for reading the license.

Questions worth answering from the license before launch:

• Does it allow using the font on a website through @font-face?
• Is web use limited, for example to certain domains or a number of monthly page views?
• May you host the files yourself, or only through the vendor’s service?
• May you convert or subset the font? Some licenses have rules for modified versions, such as reserved font names in the SIL Open Font License; the OFL FAQ discusses web use.

FontPivot cannot tell you what a license means for your project. If the answer is not clear, ask the foundry or distributor.

7. Look at it the way visitors will

Use the viewer’s text tester the way your site will use the font:

• Size: drag the size slider down to the size of your body text and up to your largest heading. Thin weights that look elegant at 64 px can be hard to read at 14 px.
• Size comparison: the viewer shows your text at several sizes at once, which makes problems at small sizes easy to spot.
• Light and dark: switch the preview background. Thin and light weights can look weaker on a dark background.
• Letter pairs and ligatures: type words with fi, fl, Th, or AV to see the spacing and ligatures the font provides.

8. Convert, then check again

When the font looks right, use “Convert to WOFF2” in the viewer without choosing the file again. The web font kit is the same one the converter makes: the WOFF2 file, an @font-face rule that uses the name, weight, and style read from the font, adjusted fallback font rules, framework snippets, and a sample page.

Then open the new WOFF2 in the font viewer once more. The name, weight, and character count should match the original. It takes a few seconds and confirms you are shipping what you checked. For a desktop file you have not converted yet, the TTF to WOFF2 and OTF to WOFF2 pages are a direct route, and the font converter handles the other formats.

Copyable checklist

Font file checklist
[ ] Format is WOFF2 for the web (original TTF/OTF kept safely)
[ ] File size is reasonable for the characters the site needs
[ ] Name and style are correct for every file
[ ] font-weight in CSS matches the weight stored in each file
[ ] Variable fonts: CSS weight range matches the font's axis range
[ ] All files in the family come from the same release (same version)
[ ] Real content previewed; no missing characters
    (quotes, dashes, currency, accented names, symbols)
[ ] Readable at body-text size, on light and dark backgrounds
[ ] License checked for web use, self-hosting, and conversion
[ ] Converted WOFF2 re-opened and compared with the original

After launch, confirm in your browser’s developer tools that the right files load and the right font draws the text. How to self-host a custom font ends with those checks.

Further reading

• Microsoft: OpenType name table and OS/2 table
• MDN: Web fonts
• web.dev: Reduce web font size