Per evitar el salt tipogràfic mentre la font es carrega, n'hi ha prou amb activar el preload de les fonts a App.vue, a 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',
// },
],
<!-- ... -->
})
Descomenta l'exemple de l'starter i canvia your-custom-font.woff2 per la font que vulguis precarregar (afegida a /public/fonts/):
{
rel: 'preload',
href: '/fonts/Inter-Regular.woff2',
crossorigin: '',
as: 'font',
type: 'font/woff2',
}
Ha d'apuntar a la mateixa ruta que el @font-face que carrega la font a /assets/styles/global.css
Per què font preload?
| Propietat | Què fa | Impacte en accessibilitat |
|---|---|---|
<link rel="preload"…> | Descarrega la font el més aviat possible. | Redueix el temps d'espera. |
font-display: swap | Millora l'accessibilitat, ja que renderitza text immediatament amb una font de substitució i el canvia quan la font personalitzada està llesta. | Evita FOIT, manté llegibilitat des del primer moment. |
font-display: block / optional | Espera (fins a ~3 s) / mostra la font només si arriba a temps. | Pot produir FOIT (text invisible) → pitjor accessibilitat. |
Per tant amb aquesta combinació (swap + preload), compleixes tant amb l'optimització de rendiment com amb les millors pràctiques d'accessibilitat.