Setting up custom fonts

Hi,

I’m trying to set up custom fonts on our website but there are some things I can’t figure out.

I followed the guide on how to import and set the fonts from https://theme.co/docs/font-manager but the things I can’t get to work is:

  • How do I apply the new body font on all body content across the site?
  • How do I apply the new heading font on all headers across the site?
    For the two points above, I know how to manually set the font to e.g. “header” but by default, all new text and headings have “inherit” as their default setting.
  • I’m not sure how to import various styles of e.g. our header font to be able to make it italic etc, or can the theme do that automatically? I just noticed that in the files we got, there were several different styles.

I added the site and login information for you in a safe not in case you need to log in and check some stuff.

Thank you!

Hey Pontus,

Thanks for reaching out!

I check your website and it seems that you have already set a custom font on all body content. To apply your custom font in the headers, you need to revisit the pages and then change the font family.

On the other hand, the only way to style the headers with italic, etc globally is using custom CSS. Regretfully providing custom CSS is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Hi Marc,

Yes, that seems to be correct, but is there any way to make the headings automatically have the “headings” font?

You can see what I mean here on the first wo rows:

What I’m trying to do is that when I create a headline, it’s font should be the font that I assigned to headings.

I hope it makes sense.

Thank you!

Hey Pontus,

There’s no option yet to globally set the fonts of the headings using our theme options. The best approach to deal with your issue is setting the headings font using custom CSS. Please add the code in the Theme Options > CSS.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "bi-headline-font" !important;
	font-weight: 700 !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Hi Marc,

Alright! Thank you for the help.

Will adding this code make the page load slower than if we manually set the headings to the “heading” font or is it the same amount of code, if that makes sense.

Best regards,
Pontus

Hi Pontus,

The code will not affect the page load. And setting it manually will generate the same amount of code for a similar purpose.

Thanks

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