Lightning Web Components do not pick up fonts from the org theme automatically. If you need a brand typeface inside an LWC, host it as a static resource and reference it with @font-face.
Steps
- Add the font files (woff2 / woff) to a static resource.
- Create a CSS file that declares the font with
@font-face. You can target the whole component with the*selector. - Upload that CSS file as a static resource.
- Load the stylesheet in your component with
loadStyle. - The component that loaded the style now renders with your custom font.
Example CSS
fonts.css — Node_ID: lwc-01
@font-face {
font-family: 'BrandSans';
src: url('/resource/BrandFonts/BrandSans.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
* {
font-family: 'BrandSans', sans-serif;
}Load it from the LWC
app.js — Node_ID: lwc-02
import { loadStyle } from 'lightning/platformResourceLoader';
import FONTS from '@salesforce/resourceUrl/BrandFonts';
export default class App extends LightningElement {
connectedCallback() {
loadStyle(this, `${FONTS}/fonts.css`);
}
}Once the stylesheet is loaded, every text node in that component uses the custom family. Repeat loadStyle only in the components that need the font — it is not global unless you put it in a shared layout component.