How to set up fonts in Frontify | Frontify Knowledge Base

Frontify supports five font sources: Google Fonts, Adobe Fonts, System fonts, Monotype Fonts, and self-hosted fonts you upload yourself. The recommended way to manage fonts is through Essentials, which lets you set them up once at the brand level and use them across all your guidelines. If Essentials isn't available for your setup, you can also add fonts per guideline using the font block.

Recommended: Manage fonts with Essentials

Essentials is the central place to manage fonts across your entire brand. Instead of adding fonts to each guideline separately, you upload them once and they're available everywhere.

To add fonts via Essentials:

Go to Brand > Essentials > Fonts.
Click Add fonts and choose your source: Google Fonts, Adobe Fonts, System fonts, self-hosted fonts, or Monotype Fonts.
For self-hosted fonts, you can upload individual font files directly — no ZIP file required.

Open your guideline, go to Typography > Main font, and select the font from the list.

A few things to keep in mind when using Essentials:

Essentials is not supported on legacy theme guidelines. Classic, Muse, and Custom themes work fine.
Fonts from Essentials don't apply to the login page yet. For the login page, use the font block or Google Fonts directly.
For Figma template rendering, only self-hosted .ttf or .otf files uploaded to Essentials work. Google Fonts, Adobe Fonts, and Monotype Fonts via integration are not supported for template rendering, and neither are variable fonts — use static versions instead.

Alternative: add fonts per guideline with the font block

If you'd like to show an example of your font in the guidelines, use the font block to set up fonts directly in a guideline.

To add a font block:

Open your guideline and switch to Edit Mode.
Click + to add a new block and search for Font.
Select the Font Block and choose your font source.
Save the block.

Font sources

Google Fonts Search for any Google Font by name and connect it directly. No file preparation needed.

Adobe Fonts Paste your Adobe Fonts embed code to connect your kit. You'll need to generate the embed code from your Adobe Fonts account first.

System Fonts Choose from fonts pre-installed on most operating systems. These are the most reliable option for newsletters and email, since custom fonts often don't render consistently across email clients.

Self-Hosted If your font isn't available via Google or Adobe, you can upload it yourself. Via Essentials, you can upload individual font files directly. Via the font block, you'll need a prepared ZIP package — see below.

Self-hosted via the font block: preparing your ZIP file

If you're uploading a self-hosted font through the font block (rather than Essentials), Frontify requires a specific ZIP structure. A few things to know before you start:

Desktop fonts won't work as-is. Files like .otf or .ttf used in Word or Illustrator are desktop fonts. They need to be in web formats and packaged correctly before uploading.
You need web font files plus a CSS file. The ZIP must contain .woff and .woff2 files alongside a fonts.css file with @font-face declarations.
One font family per ZIP. Don't mix different families in a single package.
Group all weights and styles under one family name. If Regular, Bold, and Italic are listed as separate font families in the CSS, bold and italic formatting will break.

Folder structure:

YourFontName/
├── fonts/
│   ├── yourfont-regular.woff2
│   ├── yourfont-regular.woff
│   ├── yourfont-bold.woff2
│   └── yourfont-bold.woff
└── css/
    └── fonts.css

There's no CSS generator built into Frontify, so the fonts.css file needs to be created manually. If you're unsure how to do this, reach out to Support with your font files and we can help get the package ready.

Essentials vs. font block — quick comparison

	Essentials	Font Block
Setup	Once, brand-wide	Per guideline
Self-hosted upload	Individual files	ZIP package required
Google / Adobe / System fonts	Yes	Yes
Legacy theme guidelines	Not supported	Yes
Login page fonts	Not supported yet	Yes
Figma template rendering	`.ttf` or `.otf` only	Not applicable

Troubleshooting

Bold or italic isn't working. All font weights and styles need to be grouped under the same font family name in the CSS. If each weight was uploaded as a separate family, formatting options like bold will be missing or broken.

The font uploaded but displays the wrong weight. This is usually a metadata issue in the font file itself (incorrect family name or weight values). It needs to be corrected in a font editing tool and re-uploaded.

The font doesn't appear in my other guidelines. If you're using the font block, fonts are scoped to the guideline they're added to. Switch to Essentials to manage them centrally, or add a new font block to each guideline that needs it.

My custom font isn't rendering in newsletters. Custom fonts are unreliable across email clients — this is an industry-wide limitation, not specific to Frontify. System fonts are the safest choice for newsletter content.