In one store, an embedded font caused display errors with German umlauts. On top of that, its license wasn't the foundation the client wanted to build on long-term. We removed it and replaced it with a licensed, technically suitable font. The lesson: a font isn't just a design decision. File, license and character set each need checking before it goes into the store.
The case
In the design mockup, the font looked perfect. In the store, “ä”, “ö”, “ü” and “ß” were missing characters or showed up in a fallback font. That looks unprofessional, especially in headlines. Then there was the question of whether the font was even licensed for web use.
Three checks before a font goes into the store
| Check | Question | Typical problem |
|---|---|---|
| File | Is the font in a format browsers load well? | Large files that slow down the page |
| License | Can the font be used on a website? | License for print or desktop only |
| Character set | Does it contain every character you need? | Missing umlauts or special characters |
The fastest test: set a sentence with all umlauts and the “ß” in a headline and in body text, then look at it on mobile and desktop.
What we did
- Removed the problematic embed instead of patching individual characters.
- Chose a licensed font that fits the brand and contains every character.
- Embedded the font so the client can keep managing it in the theme editor, without touching code.
What to take away
- Good in the mockup doesn't mean good in the browser. Test fonts in the real store.
- Clear the license before you install. Swapping a font later is more work than checking upfront.
- Umlauts are the fastest test. One sentence is enough to spot gaps in the character set.
- Fewer font weights, faster page. Two or three weights are almost always enough.
Does your font look different in the store than in the mockup? We'll check file, license and character set and find a clean solution.