Choose the right 'font-display' value for each web font. 'swap' is often a good default for critical content, providing instant text visibility with a subsequent font swap. For less critical text, 'fallback' or 'optional' can reduce layout shifts and save bandwidth, enhancing overall user experience and responsiveness in your UI.
@font-face {
font-family: "BrandFont";
src: url("/fonts/BrandFont-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap; /* Critical for UX */
}
@font-face {
font-family: "BodyFont";
src: url("/fonts/BodyFont-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: optional; /* For less critical fonts */
}
body {
font-family: "BodyFont", sans-serif;
}
h1 {
font-family: "BrandFont", serif;
}