Add Custom Fonts

Upload Fonts as a Static Resource

To upload your custom font as a static resource and reference it within the head markup:

1. In Setup, in the Quick Find box, enter Static Resources, and then select Static Resources.
2. 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.
3. To add a reference to the font in your site’s head markup, return to Experience Builder, and click Settings | Advanced | Edit Head Markup.
4. Insert the @font-face declaration. For example:
   1<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-styling-hooks.min.css?{ versionKey}" />
   2<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-slds-extensions.min.css?{ versionKey}" />
   3
   4<style>
   5   @font-face {
   6      font-family: 'myFirstFont';
   7      /* Replace myFonts with your resource name */
   8      src: url('{ basePath }/sfsites/c/resource/myFonts') format('woff');
   9   }
   10</style>

   • To reference a single font file, use the syntax { basePath }/sfsites/c/resource/static_resource_name.

     For example, if you upload a font file called myFirstFont.woff and name the resource MyFonts, the URL is { basePath }/sfsites/c/resource/MyFonts.

   • To reference a font file within a .zip file, include the folder structure, but omit the .zip file name. Use the syntax { basePath }/sfsites/c/resource/static_resource_name/font_folder/font_file.

     For example, if you upload a file called fonts.zip, which contains bold/myFirstFont.woff, and you name the resource MyFonts, the URL is { basePath }/sfsites/c/resource/MyFonts/bold/myFirstFont.woff.

5. In the Text section of the Theme panel, click the Base Font Family dropdown list or the Font Family dropdown list for a specific text property, and select Use Custom Font.
   
6. Add the font family name that you entered in the Head Markup editor—for example, myFirstFont—and save your changes.
   

Use Externally Hosted Fonts

You can use fonts that are hosted outside Salesforce, such as Google Fonts. However, to access externally hosted files, you must also update the Content Security Policy (CSP) for your org by adding the hosts to your list of Trusted URLs. Otherwise, an error appears indicating that the resources can’t be accessed.

For example, for Google Fonts, add:

• https://fonts.googleapis.com to access the Google Fonts style sheet
• https://fonts.gstatic.com to access fonts from Google Font

For details on how to add a Trusted URL with the required CSP directives, see Manage Trusted URLs.