Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Brand Your Aura Site
Update a Template with the Theme Panel
Use the CSS Editor for Custom CSS
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions to Add Dynamic Data to Aura Sites
Configure Swappable Search and Profile Menu Components
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Avoid Deployment Issues When Moving to Enhanced LWR Sites
Considerations for Deploying Authenticated LWR Sites
ExperienceBundle for Experience Builder Sites
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Use Custom Fonts in Your Experience Builder Site

Upload custom fonts as static resources and use them for primary and header fonts throughout your site. If you’ve more than one font file to upload, use a .zip file.
  1. In Setup, enter Static Resources in the Quick Find box, 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. In Experience Builder, open the CSS editor by clicking Theme | Open Menu | Edit CSS.
  4. Use the @font-face CSS rule to reference the uploaded font.
    For example:
    1@font-face {
2    font-family: 'myFirstFont';
3    src: url('/myPartnerSite/s/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff');
4}

    format() is an optional hint that describes the format of the font referenced in the URL.

    Note

    • To reference a single font file, use the syntax /path_prefix/s/sfsites/c/resource/resource_name, where path_prefix is the URL value that was added when you created the site, such as myPartnerSite.

      For example, if you upload a file called myFirstFont.woff and name the resource MyFonts, the URL is /myPartnerSite/s/sfsites/c/resource/MyFonts.

    • To reference a file in a .zip file, include the folder structure but omit the .zip file name. Use the syntax /path_prefix/s/sfsites/c/resource/resource_name/font_folder/font_file.

      So if you upload fonts.zip, which contains bold/myFirstFont.woff, and you name the resource MyFonts, the URL is /myPartnerSite/s/sfsites/c/resource/MyFonts/bold/myFirstFont.woff.

  5. In the Theme panel, select Fonts, select the Primary Font or Header Fonts dropdown list, and then click Use Custom Font.Use Custom Font button in Theme panel
  6. Add the font family name that you entered in the CSS editor—for example, myFirstFont—and save your changes.Enter font family name in Use Custom Font dialog box