How to Use Custom Fonts in Ghost (Including Your Own Font Files)

Your brand has a typeface. It's on your logo, your business cards and your app. On your Ghost site, though, you're limited to whatever fonts the theme offers, and changing them means editing theme code and font files.

This guide shows how to use any font on your Ghost site, including your own font files, without code, and how to keep them fast and legal.

How fonts work in Ghost

Fonts come from your theme. Some of Ghost's official themes let you choose from a short list of fonts in Settings → Design, and that's it. Using any other font, or your own, means editing the theme: adding the font files, writing the @font-face rules and changing the CSS. Or pasting a Google Fonts link into code injection and overriding the theme's styles by hand.

What Ectobuilder gives you

• A choice of well-made fonts. Inter, Geist, Manrope, Plus Jakarta Sans, DM Sans, Figtree, Outfit, Space Grotesk, Fraunces, Playfair Display, Lora, Newsreader and more, plus ready-made pairings for headings and body text.
• Your own fonts. Upload a .woff2, .woff, .ttf or .otf file and use it for headings, body text or both.
• Fonts that travel with the theme. Uploaded fonts are bundled into your theme and served from your own Ghost site. Nothing loads from Google or anyone else.

How to use your own font in Ghost

1. Open Typography

Open your theme in Ectobuilder, click Style in the left rail and open Typography.

2. Upload the font

Under Your fonts, click Upload font and choose the file. Give the font a name: that's how it shows in the font pickers. Files can be up to 2 MB.

3. Use it

Click the font's name to use it for headings, or pick it in the Headings or Body menu. The canvas changes right away, so you can see it on every page before you deploy.

4. Deploy

Deploy your theme to Ghost. The font file goes with it, into the theme's own assets.

Put your brand’s fonts on your Ghost site.
Upload your own fonts or pick from a curated list, and see them on every page as you design.

Try it free

Which file to upload

• WOFF2 if you have it. It's the smallest format and every current browser reads it. If you only have TTF or OTF, a free converter turns it into WOFF2 at about a third of the size.
• A variable font for several weights. One variable font file holds every weight, from light to black, so headings and body text can share it. A regular font file holds a single weight.
• Only the characters you need. Fonts that cover many alphabets are large. If you write in one language, a font with just the Latin characters loads faster.

Licenses

Buying a font usually gives you a desktop license, for documents and design apps. Putting it on a website needs a web license. Check the license before you upload: fonts from Google Fonts and Fontshare are free for the web, and most commercial foundries sell web licenses alongside desktop ones.

Speed and privacy

Uploaded fonts load from your own site, so there's no extra connection to another server. That's a little faster, and it means no visitor data goes to Google. Courts in the EU have ruled that loading Google Fonts from Google's servers without consent shares visitors' IP addresses, so serving fonts yourself avoids that question.

Fonts load with font-display: swap: text shows right away in a fallback font and switches when the font arrives, so a slow connection never hides your words.

Related guides

• Translate your Ghost theme: every word your theme shows, in 40 languages, plus right-to-left.
• A dark mode switch for Ghost: let readers choose light or dark.
• Core Web Vitals for Ghost: what makes a Ghost theme fast.
• How to build your Ghost theme visually: every step, from picking a theme to publishing it to Ghost.

FAQ

Design a Ghost theme that looks like your brand.
Your fonts, your colors and your layout, designed visually and deployed straight to Ghost.

Start building