2

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

  • Have you tried adding CSS in the head markup setting of communities? – AH3 Jul 5 '17 at 7:16
1

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.

enter image description here

@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.

enter image description here

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

enter image description here

1

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:

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');
}
  1. In the Branding panel, under Fonts, click Use Custom Font and add the font family name.

Branding Panel Enter Custom Font

  • One nice feature in Winter18 - back then it was a case of adding manually. – Dave Humm Dec 5 '17 at 10:26
  • Please add a bit more information in the answer though in case the link breaks. – Dave Humm Dec 5 '17 at 10:27
  • Yeah it's a cool feature @DaveHumm I thought I'd add the answer in given I was searching for it recently and this post popped up :) I've also added the instructions now – Clint Dec 5 '17 at 14:50
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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.