Why WOFF Fonts Show Boxes Instead of Letters
You open a font, type some text and see little boxes instead of letters. Sometimes the boxes are empty. Sometimes they have an X or a question mark inside. It looks like the font is broken. It usually is not. This guide explains why WOFF fonts show boxes, how to check which characters are missing and how to fix it.
What the boxes mean
Every font includes a special glyph called .notdef. It means “not defined”. When you ask a font for a character it does not have, it draws .notdef instead. In most fonts, .notdef looks like an empty rectangle, sometimes with a cross or a question mark inside.
People call these boxes “tofu”, because they look like little blocks of tofu. Google even named a font family Noto, short for “no more tofu”, because it aims to cover every language.
So the boxes are a message from the font. It is saying: “I do not have this character.”
The most common reasons WOFF fonts show boxes
1. The font was split by language
This is the number one cause with web fonts. To save bandwidth, many websites split one font into several small WOFF or WOFF2 files. Each file covers one set of characters. Google Fonts does this all the time. You might see files for:
- Latin (basic English letters)
- Latin Extended (accents for many European languages)
- Cyrillic (Russian, Ukrainian and more)
- Greek
- Vietnamese
If you saved only the Latin file, any accented letter outside it will show as a box. The browser on the original website did not show boxes, because it loaded the other files when needed. You only got one piece.
2. The font was subset for one website
Some sites go further and keep only the exact characters they use. A logo font might contain just the letters of the brand name. Type anything else and you get boxes.
3. The font does not support your language
Many fonts only cover Latin letters. If you type Arabic, Hindi, Chinese or Thai in them, you get boxes. This has nothing to do with WOFF. The designer simply never drew those letters.
4. It is an icon font
Icon fonts put their pictures at special codes and have few or no letters. Type normal text and you see boxes. Our guide on viewing icons in a WOFF file explains how icon fonts work.
5. The characters use a special feature
Some characters only appear through font features, like ligatures or alternate forms. If an app does not turn those features on, you may not see them. This is less common, but it happens with fancy script fonts.
How to check which characters a font has
The quickest way is to look at the glyph list.
- Open the free WOFF viewer.
- Drop your WOFF or WOFF2 file on the pink box.
- Type your text in the preview. Boxes show you which characters are missing.
- Scroll down to Font information and look at the Glyph count.
- Scroll to the Glyphs grid to see every character in the file.
The glyph count is a strong hint. As a rough guide:
| Glyph count | What it usually means |
|---|---|
| Under 100 | Heavily cut down, or an icon font |
| 100 to 300 | Basic Latin only |
| 300 to 1,000 | Latin plus accents, maybe Greek or Cyrillic |
| 1,000 or more | Wide language support |
| 10,000 or more | Chinese, Japanese or Korean |
Try it: Drop your font in and see exactly which characters it has.
How to fix boxes in a WOFF font
The fix depends on why the boxes appear.
Get the other language files
If the font was split by language, go back to the source and get the other files. For Google Fonts, the easiest fix is to download the full font from the Google Fonts website. Those downloads are complete TTF files with every character.
Get the full font
If the file was subset for one website, you need the original font. Use the Font family name from the viewer to search for it. Our guide on finding the font name inside a WOFF2 file shows you where to look.
Pick a font that supports your language
If the font never had your letters, no fix will add them. Choose a font that covers your language. Google Fonts lets you filter fonts by language. The Noto family covers nearly every writing system.
Use a fallback font on your website
On a website, you can list backup fonts in CSS. If the first font lacks a character, the browser tries the next one:
font-family: "MyWebFont", "Noto Sans", Arial, sans-serif;This will not make the text match perfectly, but it replaces boxes with readable letters.
Boxes after converting to TTF
Sometimes you convert a WOFF file to TTF, install it, and see boxes in Word or Photoshop. The conversion did not cause this. The TTF has exactly the same characters as the WOFF did. If the WOFF was a Latin-only slice, the TTF is too.
Before you convert and install, check the glyph list in the viewer. If the font lacks characters you need, look for the full version first. See how to convert WOFF to TTF for the full process.
Boxes on your own website
If your website shows boxes, check these things in order.
- Is the font loading at all? Open the page, press F12 and look at the Network tab with the Font filter. Every font file should load with status 200.
- Does the font have the characters? Open the font file in the viewer and type the text that shows boxes.
- Is unicode-range set correctly? If your CSS uses unicode-range, a font file only loads for the characters in that range. A wrong range can stop the right file from loading.
- Is the font an icon font used for text by mistake? Check the font-family names in your CSS.
When the font does not load at all, the browser usually shows a fallback font rather than boxes. Boxes mean the font loaded but lacks the character. That tells you which problem you have.
Crossed-out boxes vs empty boxes vs question marks
You may see different shapes, and they mean slightly different things.
| What you see | What it usually means |
|---|---|
| Empty box | The font’s .notdef glyph. The character is missing from the font. |
| Box with an X | Same thing. Many fonts draw .notdef with a cross. |
| Box with a code inside | Some systems show the missing character’s code in tiny digits. |
| Question mark in a diamond | The text itself is broken, often a file saved with the wrong encoding. |
| Plain question marks | The text was converted badly before it reached the font. |
The last two are not font problems. They mean the text is damaged. Changing the font will not help. Check how the text was saved or copied.
Why the boxes did not appear on the original website
This confuses a lot of people. The font looked fine on the website. You saved the file and now you get boxes.
The reason is how modern websites load fonts. The CSS points to several files, each with a unicode-range. The browser downloads only the files it needs for the text on the page. If the page was in English, the browser only downloaded the Latin file. That is also the file you saved. The other language files were never downloaded. To get the full font, find the original source instead of saving from the page. Our guide on how to open a WOFF2 file covers where web fonts come from.
Common questions
Can I add missing characters to a WOFF font?
Only by drawing them yourself in a font editor like FontForge, and only if the license allows changes. See how to edit a WOFF file. In most cases, getting the full font is much easier.
Why does my font show boxes for quotes and apostrophes?
Curly quotes and apostrophes are separate characters from straight ones. A heavily cut-down font may include the straight versions only. Word and other apps often swap in curly quotes as you type.
Why do emojis show as boxes?
Most text fonts do not include emojis. Your system normally fills them in from a separate emoji font. In apps or viewers that only use one font, emojis show as boxes. That is normal.
Does WOFF2 cause more boxes than WOFF?
No. Both formats hold the same characters. What matters is how the font was cut down, not how it was packed. See WOFF vs WOFF2 for the real differences.
Is my font file broken?
Probably not. If the viewer opens it and shows glyphs, the file is fine. It just lacks some characters. If the viewer cannot open it at all, see can’t open a WOFF font.
Summary
Boxes mean the font does not have the character you typed. With WOFF files, this usually happens because the font was split by language or cut down for one website. Open the file in a WOFF viewer, type your text and check the glyph grid. Then get the full font, choose one that supports your language, or add a fallback font in your CSS.
2 Comments