Use Custom Fonts in Your Experience Builder Site
- In Setup, enter Static Resources in the Quick Find box, and then select Static Resources.
-
Click New, upload the file, and give the static resource a name.
Keep a note of the resource name.
If your site has public pages, select Public in the Cache Control setting. If you don’t make the font resource publicly available, the page uses the browser’s default font instead.
- In Experience Builder, open the CSS editor by clicking .
-
Use the @font-face CSS rule to reference the
uploaded font.
For example:
@font-face { font-family: 'myFirstFont'; src: url('/myPartnerSite/s/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff'); }
-
To reference a single font file, use the syntax /path_prefix/s/sfsites/c/resource/resource_name, where path_prefix is the URL value that was added when you created the site, such as myPartnerSite.
For example, if you upload a file called myFirstFont.woff and name the resource MyFonts, the URL is /myPartnerSite/s/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 /path_prefix/s/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 /myPartnerSite/s/sfsites/c/resource/MyFonts/bold/myFirstFont.woff.
-
-
In the Theme panel, select Fonts, select the Primary Font or
Header Fonts dropdown list, and then click Use Custom Font.
-
Add the font family name that you entered in the CSS editor—for example, myFirstFont—and save your changes.