[SalesForce] Setting a font in the Napili template

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
enter image description here

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

enter image description here

Best Answer

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.