Para evitar el salto tipográfico mientras la fuente se carga, basta con activar el preload de las fuentes App.vue, en 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 el ejemplo del starter y cambia your-custom-font.woff2 por la fuente que quieras precargar (añadida en /public/fonts/):
{
rel: 'preload',
href: '/fonts/Inter-Regular.woff2',
crossorigin: '',
as: 'font',
type: 'font/woff2',
}
Debe estar apuntando a la misma ruta que el @font-face que carga la fuente en /assets/styles/global.css
¿Por qué font preload?
| Propiedad | Qué hace | Impacto en accesibilidad |
|---|---|---|
<link rel="preload"…> | Descarga la fuente lo antes posible. | Reduce el tiempo de espera. |
font-display: swap | Mejora la accesibilidad, ya que renderiza texto inmediatamente con una fuente de sustitución y lo cambia cuando la fuente personalizada está lista. | Evita FOIT, mantiene legibilidad desde el primer momento. |
font-display: block / optional | Espera (hasta ~3 s) / muestra la fuente solo si llega a tiempo. | Puede producir FOIT (texto invisible) → peor accesibilidad. |
Por lo tanto esta combinación (swap + preload), cumples tanto con la optimización de rendimiento como con las mejores prácticas de accesibilidad.