Custom Font in Communities

Hi Friends, I would like to share my experience about one of the interesting parts which I developed recently. This is about the custom font that I use in the community.

What I noticed in the community is Salesforce provides certain font styles as default. In my experience, I tried to implement the custom font called ‘Sneak’. By using multiple fonts we can make the communities more attractive and precise.  

First step I followed is , I imported the file into Static Resource (Font file) with the Extension of .Woff (Web Open Font Format) 

Select Custom Font inside Experience / Community Builder

1. Open Experience Builder / Community Builder for your community
2. Select Theme - Fonts

3. Select Fonts → Use-Custom Font

 4. Type the name of the static resource / Font name. Remember this must be the same label /name in the font-family defined in the CSS override. Also, all of these name references are case-sensitive.

Used the Font Override CSS below;

@font-face {

    font-family: 'name/label_of_static_resource’;

    src: url(' / ** full site-path ** / sfsites/c/resource/name_of_static_resource) format('woff');

}

For example - for the Sneak font as shown in above screenshot the css would be: 

@font-face {

    Font-family: SneakFont;

    src: url(' /cx/s/sfsites/c/resource/SneakFont) format('woff');

}

Note: Go to Sites → Click on your Community Site → Path is usually defined in the Custom URLs section. If it is just a “ / “ in the custom path - it means the site-path prefix is the default - “ /s “, otherwise it is “ /your-custom-path/s/ ”

5. This is the font - that is selected and applied. I can see it already come into effect!

6. Selected the same custom font as Primary font or header fonts. If you wish to have two different sets of fonts, you can repeat the steps above, and add another css override specifically for header fonts, below the previous css for primary fonts.