-
Posts
-
Hi,
I am creating a website for a new company and I don’t know how to use different fonts on the website. I am aware that in the “general styling” section a font for headers and a font for body text can be defined. I would like to use the following fonts (I have imported them from Google) on my site:
– Roboto Light
– Roboto Regular
– IBMPlexSerif MediumItalic
How can I use “IBMPlexSerif MediumItalic ” or “Roboto Regular” if Roboto Light is selected in general styling.
I would like to use the fonts in separate content elements and as well in the same elements.
Thank you for your supportHey Reto,
Thank you for your patience, first I assume that when you say that you have imported the fonts into the theme, that you mean in the Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager
If so then you can choose this font in the General Styling
or in the Advanced Styling
For elements that you can’t choose a custom font in you can add a custom class in the element Developer Settings, for example my-custom-font
and then css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field like this:.my-custom-font { font-family: 'my-font'; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi Mike, yes, I have imported the fonts as you described above and they appear under Custom Font Manager.
Lets focus on the IBMPlexSerif font:
It appears in the Custom Font Manager like this : “Font: IBMPlexSerif LightItalic ( font-family: ibmplexserif-lightitalic )
italic: 300”
In the section where I want to use the font I have added section ID “section-services” and Custom CSS Class “my-serif-font”.
Then I added the following code in Quick CSS:
#section-services.my-serif-font {
font-family: ‘ibmplexserif-lightitalic’;
}
Unfortunately the font still does not display. (I have cleared the cache).
Could you please advise?Maybe this relates to the problem I mentioned at https://kriesi.at/support/topic/gradient-transparent-permanent-header/#post-1405259 -> DEfined fonts for H2 and H4 headers stopped being applied.
Best regardsHi,
Thanks for the feedback, the font name in the Custom Font Manager may not be the actual font-family name, I recommend testing by using the Advanced Styling option to assign the font to a test element and see if it works correctly on the frontend, if it does then use the browser inspector to examine what the font-family name is and use that in your css.
If the Advanced Styling test is not working then perhaps the font you have installed is not in the supported format or the font zip file had extra directories and needs to be extracted and cleaned up.
If it is a variable font see our documentation for Using variable fonts, or this thread by Guenni007 that many have found helpful.
I don’t see how this css could change your fonts, the most likely issues is that your stylesheet is missing a bracket or has an extra bracket, please check your css carefully.Best regards,
MikeHi Mike, thank you for your help. There was an incorrect comment sign (/*) to end a comment. I have fixed this.
Now the correct font is applied if I assign it through the advanced styling option (with H4 in my case). The font family in the inspector shows as “ibmplexserif-lightitalic”.
The correct font was not applied because I had at the same time assigned an advanced styling option to the object (eventhough I left the font as “default”). Once I deleted the advanced styling option it worked as it should.Many thanks for your help!
Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘How to use several different fonts on one website?’ is closed to new replies.