Custom Fonts
Covers: loading custom fonts, registering font theme variables, applying display/body font utilities.
- Load custom fonts before using them: add
<link>tags in the HTML<head>(preferred); if no<head>exists, use@import url('…');at the top of the CSS file instead. - Register frequently used custom fonts in the CSS
@themeblock: e.g.--font-display: "Oswald", sans-serif;; optionally set--font-display--font-feature-settingsand--font-display--font-variation-settingsfor fine-tuning. - Register headline/display fonts as
--font-display(creates afont-displayutility): use--font-sansfor body/UI fonts and--font-displayfor fonts used only on headings and display text; applyfont-displayon headings alongsidefont-sanson the body.