I have a zip folder uploaded as a static resource. It's the same group of fonts we use in our current Aura site.
I've followed the instructions in
this articleto add my custom fonts to the head markup. Here is a sample of what's in my head markup. After adding this, I added a custom font option called "FontName" and then set the custom font and font weight to my H1 and H2 settings (just examples).
Despite all of that, the page is still just rendering the generic default font for everything and web inspector is indicating that the font files can't be found.
<style>
@font-face {
font-family: 'FontName';
font-style: normal;
font-weight: 200;
src: url('{ basePath }/sfsites/c/resource/KnowledgeFonts/Font200.woff') format('woff');
}
@font-face {
font-family: 'FontName';
font-style: normal;
font-weight: 300;
src: url('{ basePath }/sfsites/c/resource/KnowledgeFonts/Font300.woff') format('woff');
}
</style>
I would prefer we move the style sheet to a css file and tag that sheet in the headMarkUp. In my present project we use a lot of fonts, we added all of them into a single Static Resource and added a Css file which will have all these font Configurations. And attached that style sheet to headMarkUp.
Sometimes the CSS won't reflect in Preview Mode you need to publish the site and check it in Live Mode.