Add font-display swap to Fonts

/* font-display: swap — @font-face template for self-hosted fonts.
   Copy and repeat for each weight and style you serve.
   Replace paths and family name to match your setup. */

@font-face {
    font-family: 'MyFont';
    src: url('/wp-content/themes/my-theme/fonts/myfont-400.woff2') format('woff2'),
         url('/wp-content/themes/my-theme/fonts/myfont-400.woff')  format('woff');
    font-weight: 400;
    font-style:  normal;
    font-display: swap; /* Show fallback immediately; swap once webfont downloads */
}

@font-face {
    font-family: 'MyFont';
    src: url('/wp-content/themes/my-theme/fonts/myfont-700.woff2') format('woff2'),
         url('/wp-content/themes/my-theme/fonts/myfont-700.woff')  format('woff');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

/* Apply the custom font globally */
body {
    font-family: 'MyFont', system-ui, sans-serif;
}