Introduction

Asynchronously loading local fonts on the web usually means two things: do not block first paint, and still switch to the custom font cleanly once it is ready. The core tools are @font-face, font-display, optional preload hints, and the JavaScript FontFace API when you want explicit runtime control.

Start with @font-face and font-display

The simplest solution is still CSS. Define the local font file and tell the browser how to behave while it loads.

1@font-face {
2  font-family: 'MySans';
3  src: url('/fonts/MySans-Regular.woff2') format('woff2');
4  font-weight: 400;
5  font-style: normal;
6  font-display: swap;
7}
8
9body {
10  font-family: 'MySans', system-ui, sans-serif;
11}

font-display: swap is important because it allows fallback text to render immediately and then swap to the custom font once loaded.

That is already asynchronous from the user's point of view because rendering does not wait for the font to finish before text appears.

Use preload for Important Fonts

If one local font is critical to above-the-fold content, preload it.

1<link
2  rel="preload"
3  href="/fonts/MySans-Regular.woff2"
4  as="font"
5  type="font/woff2"
6  crossorigin>

This tells the browser to fetch the font earlier, but it still does not mean the page must block on it. Preloading is about fetch priority, not synchronous rendering.

Load Fonts Explicitly with the FontFace API

If you want JavaScript control over when the font is requested and when a class is added to the page, use the FontFace API.

1<script>
2async function loadLocalFont() {
3  const font = new FontFace(
4    'MySans',
5    "url('/fonts/MySans-Regular.woff2') format('woff2')"
6  );
7
8  await font.load();
9  document.fonts.add(font);
10  document.documentElement.classList.add('fonts-ready');
11}
12
13loadLocalFont().catch(console.error);
14</script>

Then in CSS:

1body {
2  font-family: system-ui, sans-serif;
3}
4
5.fonts-ready body {
6  font-family: 'MySans', system-ui, sans-serif;
7}

This gives you explicit control over the swap timing.

Why "Async" Does Not Mean "Invisible Until Loaded"

Many font-loading questions are really about avoiding FOIT and layout shifts. The most practical answer is usually not "wait for the font before showing text". It is "show fallback text immediately, then swap cleanly if and when the font arrives".

That is why font-display and well-chosen fallback stacks matter as much as the loading mechanism.

Use Good Local Font Assets

For local fonts, prefer woff2 when possible. It is smaller and better suited to web delivery than older formats.

Also keep the font set minimal. If the page only needs regular and bold weights, do not load every weight and style up front. Async font loading helps, but unnecessary files still cost bandwidth and delay the final visual result.

CSS-Only Versus JavaScript-Controlled Loading

If the requirement is only non-blocking font rendering, CSS with font-display is usually enough and keeps the implementation simpler. The FontFace API becomes worthwhile when the application needs to know exactly when the font is ready before toggling classes or rendering a font-dependent UI state. Choosing the simpler mechanism first usually leads to fewer surprises.

Common Pitfalls

• Loading local fonts asynchronously but forgetting to define a solid fallback font stack.
• Using JavaScript font loading when plain @font-face plus font-display would be enough.
• Preloading too many font files and defeating the performance benefit.
• Serving heavier or older font formats when woff2 is available.
• Thinking async font loading means text should stay hidden until the font is ready.

Summary

• The simplest async-friendly local font setup is @font-face plus font-display: swap.
• Use preload only for fonts that matter to initial visible content.
• Use the FontFace API when you need explicit runtime control over loading and swap behavior.
• Keep fallback fonts and font-file selection deliberate.
• Good async font loading is about non-blocking rendering and controlled swapping, not only about fetching the file later.