Add Custom Fonts

You can add custom fonts by uploading the font file as a static resource. Alternatively, you can reference a file that’s hosted externally.

Upload Fonts as a Static Resource

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

In Setup, in the Quick Find box, enter Static Resources, 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.
To add a reference to the font in your site’s head markup, return to Experience Builder, and click Settings | Advanced | Edit Head Markup.

Insert the @font-face declaration and define the appropriate --dxp styling hooks in your desired scope (either :root{} to the whole page or within a specific selector or component).

--dxp-g-root-font-family defines all text other than headers.
--dxp-g-heading-font-family defines headline text.

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 myFont with your resource name */
8      src: url('{ basePath }/sfsites/c/resource/myFont') format('woff');
9   }
10
11   :root {
12      /** set the font for all root/body text **/
13      --dxp-g-root-font-family: 'myFirstFont', Helvetica, sans-serif;
14      
15      /** set the font for headings **/
16      --dxp-g-heading-font-family: 'myFirstFont', Times, serif;
17   }
18</style>

Make sure that the font file format, for example, woff, matches your markup. Also make sure that your fallback values, such as Helvetica, sans-serif, and so on, are properly defined for your brand. To learn more, see @font-face.

Tip

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 CSP Trusted Sites. Otherwise, an error appears indicating that the resources can’t be accessed.

For example, for Google Fonts, you would add:

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

Step 1: Add Sites to Your Org’s List of CSP Trusted Sites

From Setup, in the Quick Find box, enter CSP Trusted Sites, and click CSP Trusted Sites.
Click New Trusted Site.
To add a trusted site for external style sheets:
1. Enter a name—for example, GoogleFontAPI.
2. Add the URL—for example, https://fonts.googleapis.com.
3. Make sure that it’s Active, and select Allow site for style-src.
4. Click Save & New.
To add a trusted site for external fonts:
1. Enter a name—for example, GoogleFontStatic.
2. Add the URL—for example, https://fonts.gstatic.com.
3. Make sure that it’s Active, and select Allow site for style-src.
4. Save your changes.

LWR Sites for Experience Cloud

Add Custom Fonts

Upload Fonts as a Static Resource

Use Externally Hosted Fonts