Hosting fonts on your own server is faster, avoids third party requests and helps with privacy rules. Use @font-face to register the font and font-display to control how text shows while the font loads.

Register the font

@font-face {
    font-family: "Lotgrafix Sans";
    src: url( "../fonts/lotgrafix-sans-regular.woff2" ) format( "woff2" );
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lotgrafix Sans";
    src: url( "../fonts/lotgrafix-sans-bold.woff2" ) format( "woff2" );
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Use the font

body {
    font-family: "Lotgrafix Sans", system-ui, sans-serif;
}

font-display values

• swap: shows fallback text right away and swaps when the font loads. Best for most sites.
• optional: uses the font only if it loads very fast. Best for avoiding layout shift.
• fallback: short block period and a short swap window.
• block: hides the text until the font loads. Avoid it for body text.

Preload the main font in WordPress

function lotgrafix_preload_font() {
    $font = get_template_directory_uri() . '/fonts/lotgrafix-sans-regular.woff2';
    echo '<link rel="preload" href="' . esc_url( $font ) . '" as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'lotgrafix_preload_font', 1 );

Tips

• Use the woff2 format, it is supported by all modern browsers and is the smallest.
• Load only the weights you really use.
• Add the crossorigin attribute to font preloads, even for same-origin files.