Local fonts installation

Developer help Self-hosting
1

Hello,

I try to install a local font for my Blog. I installed Ghost with docker-compose. Where must I place the ttf file?

2

In content/themes/yourtheme/assets would be a reasonable choice. (You may need to make the assets folder if your theme doesn’t have one.)

3

Okay thank you. But I have first check my site then posting. :blush: It seems my blog has local fonts. Can’t find no external resource at the browser console are with any other tool.

I am new the Ghost.

4

I have an adjacent problem: I own the licence to multiple woff2 font files (for web use) and I can’t figure out where to put them, either.

I tried using the sample Code Injection, but they don’t come up as usable. I tried to modify the css and that didn’t work, either.

I am a total noob, can someone help? (Digest theme, if that matters)

5

Code Injection can add the CSS needed to use a font, but it cannot upload or store the .woff2 files themselves. Also, a font declared with @font-face will not appear as a new option in Ghost’s font picker—you need to apply it with CSS.

For Digest, the most reliable solution is to include the font files in the theme:

  1. Download and unzip the Digest theme.

  2. Create an assets/fonts folder.

  3. Put your .woff2 files in that folder.

  4. In default.hbs, add the following directly after {{ghost_head}}:

<style>
    @font-face {
        font-family: "My Custom Font";
        src: url('{{asset "fonts/my-font-regular.woff2"}}') format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "My Custom Font";
        src: url('{{asset "fonts/my-font-bold.woff2"}}') format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --font-sans: "My Custom Font", Arial, sans-serif;
        --font-serif: "My Custom Font", Georgia, serif;
    }
</style>

Change the filenames to match your actual files exactly—paths and filenames are case-sensitive. Then zip the theme again and upload the modified version.

If you cannot upload a modified theme, the other option is to host the font files somewhere publicly accessible and use their full HTTPS URLs in the @font-face declarations in Code Injection.

Also check that your font licence allows you to self-host the files on the domain where they will be used.

6

THANK YOU!! That is so helpful!