When in CSS, how can I use custom font previously added to Font Manager?

I went ahead and added a custom font family to the Font Manager, but when I go and try to use it within CSS for an embedded form it doesn’t seem to be pulling it for some reason… is there a specific way in CSS to use any fonts in the Font Manager?

Hi @benmeroff,

Thank you for writing in, you can use it on your custom CSS like

.selector {
    font-family: "name-of-the-font";
}

However, you need to use this font on at least one of your elements, so the page will load the font. No element using the font, then it’s not going to load.

Hope it helps,
Cheers!

1 Like

I am trying to do the same on my website to an ampersand in the heading, but I can’t get it to load the font “Ruthie” even though it’s loaded in Font Manager.

Hello Natalie,

I have checked your site and I found out that you are using relative path urls of the font files. We recommend that you use absolute path for the font files instead.

Do not use this: ../fonts/ruthie-v10-latin-regular.xxxx
You will have to use this: https://example.com/the/directory/where/you/have/uploaded/fonts/ruthie-v10-latin-regular.xxxx

Kindly let us know how it goes.

Since it’s a Google Font selected in Font Manager instead of an uploaded font file, what is the best way to use it?

Hi Natalie,

Try adding this code @import url('https://fonts.googleapis.com/css?family=Ruthie&display=swap'); in the theme’s style.css.

Just tried adding that, but still no luck getting it to apply to that one character. Sorry for the trouble.

Hi Natalie,

Please open a new thread instead and we will troubleshoot it there. You don’t have a child theme so I am not sure where you add suggested CSS. On that new thread, please share credentials inside a secure note.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.