Setting a font in the Napili template

Question

I am trying to change the font across my community site built on the Customer Service (Napili) template and this does not give me a consistent display across the site despite trying both a Theme component with the css for the font and the css on the pages.

The fonts have been uploaded to the community assets so should be visible but only seem to work on the List pages where they are accessed from a tab or navigation menu item not a list or detail page accessed via a HTML component link to the other parts of the site.

css used in theme component

@font-face {
font-family: 'gt_walsheimregular';
src: url('gt-walsheim-webfont.eot');
src: url('gt-walsheim-webfont.eot?#iefix') format('embedded-opentype'),
     url('gt-walsheim-webfont.woff2') format('woff2'),
     url('gt-walsheim-webfont.woff') format('woff'),
     url('gt-walsheim-webfont.ttf') format('truetype'),
     url('gt-walsheim-webfont.svg#gt_walsheimregular') format('svg');
font-weight: normal;
font-style: normal;

}

.cFWCPTheme {
    font-family: 'gt_walsheimregular' !important;

}

I have also tried setting the CSS in the community builder using this answer at the Developer forums.

@font-face{font-family:'gt_walsheimregular';
           font-style:normal;
           font-weight:normal;
            src: url('gt-walsheim-webfont.eot');
           src: url('gt-walsheim-webfont.eot?#iefix') format('embedded-opentype'), url('gt-walsheim-webfont.woff') format('woff'), url('gt-walsheim-webfont.ttf') format('truetype'), url('gt-walsheim-webfont.svg#svgFontName') format('svg');}

*{
       font-family:'gt_walsheimregular' !important;
    }

This has had the same effect as using the Lightning Theme component.

Case list view on home page in tab

Case list on list view page accessed via url in HTML element.

Answer 1

I had the same problem loading custom fonts. I followed the same SF documentation as noted above to a tee, no change.

What ended up working for me was removing the format in the @font-face declaration (inside the builder/theme/edit CSS). Here's what that looked like using a zipped static resource:

@font-face {
  font-family: "Gotham Book";
  src: url("/sfsites/c/resource/gothamFonts/Gotham/Gotham-Book.otf");
}

After trying everything I could think of, I was reading over the MDN font face documentation and noticed the format wasn't required in the src descriptor. Gave it a go and it worked! Hope this helps someone out there.

Answer 2

I had a same issue .Previously src: url(/resource/RobotoFonts/Roboto-Medium.ttf); dint work but after updating to src: url("/sfsites/c/resource/RobotoFonts/Roboto-Light.ttf");

working as expected.No CSP issues.

Answer 3

To setup the fonts in a static resource create a zip file with a stylesheet file with a .css extension and the associated font files.

@font-face {
    font-family: 'gt_walsheimregular';
    src: url('gt-walsheim-webfont.eot');
    src: url('gt-walsheim-webfont.eot?#iefix') format('embedded-opentype'),
         url('gt-walsheim-webfont.woff2') format('woff2'),
         url('gt-walsheim-webfont.woff') format('woff'),
         url('gt-walsheim-webfont.ttf') format('truetype'),
         url('gt-walsheim-webfont.svg#gt_walsheimregular') format('svg');
    font-weight: normal;
    font-style: normal;

} 

In the Community Builder add a link to the static resource file in Settings>Advanced>Head Markup

Include the link in the Head Markup using the resource URL specific to the Salesforce Org.

To the Pages add the Branding with the reference to the fonts in the static resource file in the css.

Answer 4

To set a custom font in the Napili template, use the instructions at the following link - https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_font.htm

These instructions allow you to add the font in the branding editor, and doesn't require you to reference the resource directly in the head markup.

To get this working you'll need to perform the following steps:

1. In Setup, enter Static Resources in the Quick Find box and click Static Resources.
2. Click New, upload the file, and give the resource a name. Keep a note of the static resource name. If you have more than one font file to upload, use a .zip file to bundle the fonts.
3. In the CSS Editor in Community Builder, use the @font-face CSS rule to reference the uploaded font. To reference a single font file, use the syntax /sfsites/c/resource/resource_name. For example, if you upload a file called myFirstFont.woff and name the resource MyFonts, the URL is /sfsites/c/resource/MyFonts. To reference a file in a .zip file, include the folder structure but omit the .zip file name. Use the syntax /sfsites/c/resource/resource_name/font_folder/font_file. So if you upload fonts.zip, which contains bold/myFirstFont.woff, and you name the resource MyFonts, the URL is /sfsites/c/resource/MyFonts/bold/myFirstFont.woff.

If you want more information regarding the CSS property font-face visit the following links:

• https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face
• https://css-tricks.com/snippets/css/using-font-face/

Below is example CSS of an example font being referenced from a zipped folder:

@font-face {
    font-family: 'myFirstFont';
    src: url('/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff');
}

4. In the Branding panel, under Fonts, click Use Custom Font and add the font family name.