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>

   Salesforce automatically replaces the `{ basePath }` variable is with your site's base URL path at run time. For example:

   If your site URL is `https://mycompany.force.com/customerportal`, then `{ basePath }` resolves to `/customerportal`.

   The full font URL becomes: `https://mycompany.force.com/customerportal/sfsites/c/resource/MyFonts`.

   Always use `{ basePath }` (with the curly braces and spaces) exactly as shown in the examples. Don't replace it with your site path.

   • 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 hosted outside Salesforce, such as Google Fonts. To access externally hosted files, 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 you don't have access to the resource.

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.