Bypassing the Default Look: Designing Custom Experience Cloud Portals

Salesforce Experience Cloud is the fastest way to expose CRM records directly to partners and customers. However, by default, standard sites can look stiff, corporate, and visibly built on a templates engine. To establish brand trust and credibility, custom portals should feel like an organic extension of your product. Here is how to style Experience Cloud. ### 1. Set Custom Font Packages Experience Builder limits default selection to standard system font faces. To inject modern styling: 1. Upload your font package files (`.woff2`) as Static Resources. 2. In Experience Builder, navigate to **Settings > Advanced > Edit Head Markup**. 3. Add a custom `@font-face` CSS definition referencing your static resource path: ```css @font-face { font-family: 'Outfit'; src: url('/sfsites/c/resource/OutfitFont/Outfit-Bold.woff2') format('woff2'); font-weight: 700; } ``` ### 2. Implement Global CSS Variables Use the CSS Editor inside theme configurations to define modern layout vars: ```css :root { --dxp-c-card-border-radius: 12px; --dxp-c-button-primary-bg: #0284c7; --dxp-c-button-primary-hover-bg: #0369a1; --dxp-c-button-border-radius: 8px; } ``` By overwriting standard DXP custom design variables, you automatically style all default buttons, cards, inputs, and search fields consistently.