To avoid the typographic jump while the font loads, just enable font preloading in App.vue, in useHead:
useHead({
meta: [
...
],
link: [
{
rel: 'icon',
type: () => `image/${faviconType.value}`,
href: () => `${favicon.value}?w=100&h=100`,
},
// example of custom font preloading
// {
// rel: 'preload',
// href: '/fonts/your-custom-font.woff2',
// crossorigin: '',
// as: 'font',
// type: 'font/woff2',
// },
],
<!-- ... -->
})
Uncomment the starter example and change your-custom-font.woff2 to the font you want to preload (added in /public/fonts/):
{
rel: 'preload',
href: '/fonts/Inter-Regular.woff2',
crossorigin: '',
as: 'font',
type: 'font/woff2',
}
It must point to the same path as the @font-face loading the font in /assets/styles/global.css
Why font preload?
| Property | What it does | Accessibility impact |
|---|---|---|
<link rel="preload"…> | Downloads the font as early as possible. | Reduces waiting time. |
font-display: swap | Improves accessibility by rendering text immediately with a fallback font and swapping it once the custom font is ready. | Avoids FOIT, keeps readability from the first moment. |
font-display: block / optional | Waits (up to ~3 s) / shows the font only if it arrives in time. | May cause FOIT (invisible text) → worse accessibility. |
So with this combination (swap + preload), you meet both performance optimization and accessibility best practices.