Custom font issue - bold not working

Using Ghost
1

Hello friends,

Struggling a bit here. I tried to insert a font into theme, it works but when I make words bold they don’t show up that way in blog posts.

here is code:

<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
<style>
    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 100 900;
        font-display: optional;
        src: url({{asset "fonts/epilogue-variablefont_wght-webfont.woff2"}}) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
</style>

grateful for any input, thanks

2

Can you link a page showing the problem, please?

3

sure here is a link:

https://finspector.ghost.io/test-post/

also if you notice you might have to refresh the page to see the font actually work.

4

Actually, I don’t ever see your font appears on my screen. My browser is choosing to use Segoe UI, which displays the bold just fine.

I can see both your epilogue font and actual inter getting loaded, based on network calls.

I’m /guessing/ that the browser is confused by multiple definitions of Inter. Is there a reason you’re trying to load your custom font as Inter, instead of redefining the open-sans css variable to use it?

5

Oh hang on - why do you have the font marked optional? You probably want ‘swap’ there instead, which /does/ cause epilogue to show up on my screen. (At least, after I edit your source in the inspector. No promises on a fresh load that may have a race condition for font definition.)

6

So, you need to do two things:

  1. Change the font-face definition. Here, I’m loading directly from Google fonts. You should also be able to download the font, but I don’t have an easy way to test that on your site.
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/epilogue/v17/O4ZRFGj5hxF0EhjimlIksgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  1. Change the open-sans definition.
<style>
:root {
 --open-sans: "Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
</style>

Refinements:
If you can edit the theme, consider removing the part that’s loading Inter, if you don’t intend to use it anywhere.

Add a preload for this font.

Consider whether you also want to load the italic version of the font, etc. You can pick and choose from options here:
https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap

1 Like
7

Hi Cathy, really appreciate you helping me here.

Unfortunately I’m a complete amateur here so wasn’t able to implement what you described correctly. To be clear, I copy and pasted both of what you sent there and replaced what was there before so it looks like this:

<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
<style>
   @font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/epilogue/v17/O4ZRFGj5hxF0EhjimlIksgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

<style>
:root {
 --open-sans: "Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
</style>

that didn’t seem to work for me though. doesn’t load the font anymore either.

9
  1. There is a small syntax error in your above code.
  2. Where do you want the “Epilogue” font to work? Header, post content, or whole site?
    For example, if you want the whole site displayed in “Epilogue”, change the above code into
  <link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'Epilogue';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/epilogue/v17/O4ZRFGj5hxF0EhjimlIksgg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  </style>
  <style>
    :root {
      --open-sans: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    }
    body {
      font-family: var(--open-sans) !important;
    }
  </style>
10

hey Raki appreciate your input!

I tried your code, but no luck. I want the font to work for the whole site yes

finspector.ghost .io/test-post/

11

Try this:

<style>
    @font-face {
      font-family: 'Epilogue';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/epilogue/v17/O4ZRFGj5hxF0EhjimlIksgg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    :root {
      --font-epilogue: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    }
    body * {
      font-family: var(--font-epilogue) !important;
    }
  </style>
12

Brilliant, thanks Raki!

The font is working now, though weirdly i had to choose 2 diff fonts for body and header for it to work.

image

but it’s not a big problem anyways, it seems to be working on my end. Does it look right to you?

13

Your theme has detailed font settings controlled by “Title font” and “Body font”, e.g. line height, font weight, and more. Although you added “Epilogue”, you still need to use “Title font”, “Body font” to control all other font settings.

If you can use a custom theme(Ghost Pro Starter plan users can’t), you can fully override all these font settings.