LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
Enable --dxp Styling Hooks
--dxp Styling Hooks in LWR Sites
How --dxp Styling Hooks Map to Theme Panel Properties
Use --dxp Styling Hooks in Custom Components
Override Component Branding in LWR Sites with Custom CSS
Create a Section Color Palette
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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:

  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 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.

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 Trusted URLs. 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

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