Typography & Fonts
Text motifs, Google Fonts, outlining on export, and small-size readability.
Text motifs (the Text type in the editor) use Google Fonts. Favycons loads the exact family, weight, and style you pick for preview and export.
How text survives export
On export, <text> elements are converted to <path> outlines. The downloaded PNG, SVG, ICO, or ICNS does not depend on the target environment having your font — it should render the same everywhere.
The editor preview still needs the font to load live. If preview and export disagree, the font likely failed to load before export.
Small-size readability checklist
Before exporting a text motif, check 16px and 32px:
- Weight is 600 or heavier — light weights (300 and below) vanish at favicon scale.
- Letter count is 1–2 for favicon use — three or four characters need more padding and contrast.
- Padding gives the glyphs breathing room — cramped edges blur together.
- Effects are off until the plain letter reads small — outline can help contrast only after the base shape works.
- Serifs and thin strokes are avoided — geometric sans families survive better than high-contrast serifs.
Fonts that tend to work poorly at 16px
These are common failure modes, not a ban list:
| Choice | Why it struggles small |
|---|---|
| Thin weights (100–300) | Strokes disappear against the background |
| High-contrast serifs (e.g. Playfair Display light) | Fine details merge into noise |
| Ultra-light italics | Few pixels remain at 16px |
| Four characters at default padding | Each glyph is too narrow to read |
Fonts that tend to work well at 16px
| Choice | Why it survives |
|---|---|
| Bold geometric sans (Inter 700, Roboto 700, Montserrat 700) | Even stroke weight at small sizes |
| Single bold letter or monogram | Maximum space per glyph |
| High contrast with the background | Separates motif from fill |
Always verify in the editor's small previews — family names are guides, not guarantees.
When outlining can fail
Export fetches the font binary and converts each text node to paths. Outlining can fail or skip a node when:
- The font file fetch fails (network, rate limit, or missing variant).
- The text node is missing family, size, or position attributes after SVG generation.
- The page was exported before the font finished loading in the editor.
Recovery:
- Refresh, wait for the preview to show the correct face, then export again.
- Switch to a common weight (400 or 700) — some variable or rare styles fail to fetch.
- Simplify to fewer characters or a bolder weight.
- If export errors persist, try a different family.
Editor vs export mismatch
| Symptom | Likely cause | Fix |
|---|---|---|
| Font change does nothing in editor | Font not loaded; browser fallback showing | Refresh; pick another family |
| Preview correct, export looks wrong | Export ran before font fetch completed | Refresh, confirm preview, re-export |
| Export fails with font error | /api/google-font-file could not serve the variant | Try 400/700, different family |
Related
- Editor Guide — text motif type and small-size workflow
- Troubleshooting — font and export failure symptoms
- Single-File Export — PNG/SVG export of text motifs