Use your WordPress theme's typography controls where they are available. If you need a custom font, first confirm that its license permits web use, then test readability and loading behavior on the public site.
Start with the theme's controls
Block themes can expose typography choices through the editor's Styles interface. WordPress also documents the Font Library for managing fonts. The controls available on a particular site depend on its theme and configuration.
For a classic theme, check its documented typography settings or child-theme workflow. Avoid changing the parent theme directly if an update could overwrite the change.
Load a web font with CSS
The CSS @font-face rule associates a font family with a font resource. WOFF2 is a web-font format supported by modern browsers. Use the format and files supplied under your font's web license.
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "Site Sans", system-ui, sans-serif;
}The path above is an example: replace it with the location of your own licensed font file. Declare the weight and style that the file actually contains. A fallback stack keeps text readable if the custom font cannot load.
Check the result
Inspect the font request in browser developer tools and confirm that it succeeds. Check headings, body text, buttons, accented characters and mobile line wrapping. Load only the weights and styles the design uses, and check for layout movement as the font arrives.
Keep a backup of the previous styles and test the change on staging before applying it to a busy website.
Responses (2 )