Custom Fonts Not Applied in Salesforce Experience Cloud Experience Builder

In Salesforce Experience Cloud (formerly Community Cloud), it is possible to add a custom font to an Experience Site to control site branding. However, there is a known limitation when an Experience Site has multiple domains — for example, both a custom domain and the native Force.com subdomain with a path prefix.
In this scenario, the custom font may be applied correctly on the live site but not reflected when viewing the site in Experience Builder, or vice versa.

Why this happens:
The @font-face CSS declaration used to apply custom fonts requires specifying a relative URL to the font resource. If the native Force.com subdomain has a path prefix (e.g., /Prefix), that prefix must be included in the font-face URL. Most custom domains do not have a path prefix. This creates a mismatch: the font works on the domain whose URL pattern matches the font-face declaration, but not the other.

For example:

1. ExperienceSite1 has two domains:
   • Native force.com subdomain with path prefix: https://example.force.com/Prefix
   • Custom domain: https://example.custom.com
2. Following our documentation, a font-face is created and added to the Experience:

@font-face {
    font-family: 'exampleFont';
    src: url('/s/sfsites/c/resource/MyFonts/bold/exampleFont.woff') format('woff');
}

• • This URL has no path prefix — so fonts render correctly on the custom domain live site.
  • In Experience Builder (which uses the native Force.com URL with the path prefix), the font does not load.