Custom Font not working in Global CSS

Support
#1

Hey there!

I am using a custom font on this website I am developing locally. I have uploaded the font I bought through the Font Manager, so far now problems. When I use the font in the Cornerstone builder, all works just fine. However, I’d also like to style a title in the author-box, which I can only do through custom CSS. To keep things clear, I only use the Global CSS option in the X - Options. When I use the font there (e.g.: .x-author-info h4 { font-family: “Logotype”!important; }, it does not apply the font but uses a default font. Any idea how or why this is happening?

#2

Hello Marije,

The following are the possible reasons:

  • Font family you are using is incorrect. To make sure you using correct font family, inspect the element you made in Cornerstone using this font correctly, then see the font family that is currently in use. Is that what you are using on your custom CSS?
  • You do have CSS syntax error. Make sure that all your custom CSS have correct { and closing } tag. Missing or excess tag will result to this error.
  • I can see you are using important already, but there might be a more specific font added to it.

We can’t confirm which one is the reason unless we check the actual page element directly. If you can’t find it, please uploade your site even on a staging url and we will check. Thank you.

#3

Hey Lely,

Thank you for your reply.

Unfortunately, none of your suggestions are the solution. I have checked everything multiple times. For now I have resolved it by changing the font of ALL headers through Font Manager, and then styling all other headers than h4 through Global CSS. This did work, but it is obviously not the most elegant and simple way to do it…

I am developing the site locally (through MAMP), so sharing is not possible at this stage. As I made the above change already, I am also not sure if you could still find the problem if I do share it when it is online?

Anyways, thank you and hopefully one day we will find a better solution for this.

#4

Hey Marije,

This sounds like the font isn’t loaded in the front-end because you’re trying to use the font globally

yet the font is only added/loaded in a specific page.

To check if that is the case, try using your font as the body font in Theme Options > Typography so the font will be loaded globally.

Check the front-end if your font works. If the author box still doesn’t use the font, the problem is with your CSS as Lely described.

Thanks.

#5

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