8

I am trying to apply a custom font to my Napili Template using Community Builder. I followed the steps laid out in Use Custom Fonts in Your Community. Here's my css definition:

@font-face {
    font-family: 'Freight Sans Pro';
    src: url('/sfsites/c/resource/FreightSansFamilyWoff/FreigSanProBlk.WOFF') format('woff');
}

I have selected these fonts in the branding template:

Branding Template Fonts


It looks great in the Community Builder and Preview:

Font Preview

But the published result doesn't use the font:

Published Font

When investigating network resources, my font resource fails to load with a 404 (Not Found) code:

Static Resource Headers

Is the path not correct? The zipped resource is named FreightSansFamilyWoff and there is a file therein named FreigSanProBlk.WOFF. I pulled this url scheme directly from the above linked documentation (Use Custom Fonts in Your Community).


I also moved the font definition into a separate .css file and linked it in the header script:

<link rel="stylesheet" href="/sfsites/c/resource/CommunitiesHeaderStyle"></link>

Still 404:

Stylesheet 404


I have set the Cache Control option on my Static Resource to Public.

I have tested on Mac OS X (10.11.3) with Chrome Version I have tested on Mac OS X (10.11.3) with Chrome Version 63.0.3239.108 and also Safari Version 9.0.3. I tried clearing my browser cache and running in an incognito window just to verify I'm not hitting caching issues.


Why is my published community not using my custom font?

4 Answers 4

3

Thanks to @Pratima and @MohithShrivastava for posting a working URL path:

Instead of:

/sfsites/c/resource/MyFont.woff

I used:

/resource/MyFont.woff

Now everything works as expected.

3

If somebody is still struggling with this, after making sure the URL is correct, I changed:

src: url('someurl/myfont.ttf') format('ttf');

To:

src: url('someurl/myfont.ttf');

So simply removed the "format" and it worked after. After some digging, I found out that I should have used "truetype" as the format, see supported values here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

So if you only have one font, you can just ditch the format(). The logic of format() is that the user agent can choose which format it supports and only download that. As "ttf" is no valid type, the browser simply doesn't download that font.

2
  • 1
    Thank you! This is exactly what fixed it for me. I had originally tried to upload several fonts through a zip file as my static resource, which also made things much more complicated for me. Breaking them out into individual static resources (just the font file, no folder), and then removing the "format" piece at the end immediately fixed my issue. I was trying to use a "woff2" file, for anybody wondering.
    – Sam Howle
    Mar 28 at 18:03
  • You're welcome! :-) It's funny how the seemingly redundant tasks are sometimes the most challenging Apr 27 at 10:20
0

I was facing same issue. My dev instance working but not the sandbox instance

I called the url of static resource from community to identify the URL which allows to download the font file finally below was my url which downloads the font

https://XXX-XXX-community.csXX.force.com/communityName/s/sfsites/c/resource/resourcename

finally css font definition is

@font-face {
    font-family: 'fontname';
    src: url('/communityName/s/sfsites/c/resource/resourcename') format('woff');
}

Whereas in my dev instance

@font-face {
    font-family: 'fontname';
    src: url('/sfsites/c/resource/resourcename') format('woff');
}
-1

I ended up having to drop the .woff and it worked.

src: url('/sfsites/c/resource/Quadon')

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.