Font Display

Font display is a CSS property that controls how fonts appear on your website. By default, Typeweave uses the swap value for the font-display property.

This means that while a custom font is loading, the browser displays a fallback font. Once the custom font is ready, the browser swaps it in place of the fallback font.

Font Display Values

swap (default)

The browser uses a fallback font while the custom font loads, then swaps to the custom font once available. This prevents invisible text but may cause a layout shift.

block

The browser hides text for a short period while waiting for the font to load. If the font doesn't load in time, it shows the fallback font.

fallback

A compromise between swap and block. The browser hides text for a very short time, then shows the fallback. If the custom font loads later, it swaps.

optional

The browser hides text for a very short time. If the font doesn't load quickly enough, the fallback is used and the custom font is only applied on subsequent page loads.

Learn more: You can read more about the font-display property in the MDN Web Docs.

Customizing Font Display

To customize the font-display property, you can create custom @font-face rules in your CSS. Typeweave packages include the font files that you can reference directly:

/* custom-fonts.css */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: optional; /* Custom value */
  font-weight: 100 900;
  src: url('../node_modules/@typewe/inter/fonts/Inter-Variable.woff2')
       format('woff2-variations');
}

Then import your custom CSS instead of the default package CSS:

// Import your custom CSS instead of default
import './styles/custom-fonts.css';

Note: This method works with Vite-based frameworks or similar setups that support CSS bundling with url() rewrites. For other bundlers, you may need to adjust the path.