Aquí está tu problema
@font-face {
...
font-display: auto;
...
}
Le estás diciendo al navegador que decida él como quiere renderizar tu font. Yo en tu lugar usaría swap
o fallback
y aquí el porque:
Para saber que configuración necesitas debes entender lo siguiente primero
Tiempo de bloqueo de fuente: Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa invisible. Si la fuente se carga correctamente durante este período, se utiliza normalmente.
Tiempo de intercambio de fuente: Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente
Luego mira lo que significan los distintos valores aquí. Yo voy solamente a incluir los dos que me parecen los mejores candidatos para solucionar tu problema.
- swap: No establece tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.
- fallback: Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.
Tomando en cuenta lo anterior entonces si necesitas que tu fuente siempre se vea debes usar swap
para que nunca esté invisible. Los valores fallback
o optional
te darán tiempos de bloqueo muy cortos o sea que el texto no se verá en un intervalo muy pequeño de tiempo. Un tiempo de bloqueo grande usando auto
o block
te dará como resultado un FOUT (Flash de Texto sin Estilo o Flash of Unstyled Text) o un FOIT (Flash de Texto Invisible) dependiendo de la version de tu navegador.
@font-face {
font-family: 'Arvo';
font-display: block;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
.styled-text {
font-family: 'Arvo', sans-serif;
}
<h1 class="styled-text">Texto de prueba</h1>
Si usas swap
el navegador esperará todo el tiempo que sea necesario para que cargue tu fuente y te mostrará la fuente alternativa desde el principio ya que no tiene tiempo de bloqueo.
@font-face {
font-family: 'Arvo';
font-display: swap;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
.styled-text {
font-family: 'Arvo', sans-serif;
}
<h1 class="styled-text">Texto de prueba</h1>
Usar fallback
si te vuelve el texto invisible en un período corto de tiempo y luego muestra la fuente alternativa dando otro tiempo de espera antes de desistir de aplicar tu fuente.
Usar optional
te sirve cuando da igual si la fuente se encuentra o no pues el navegador no intentará actualizarla si esta no se carga durante el período de bloqueo que es muy pequeño.
Probar esto te resultará un poco difícil ya que el navegador guarda las fuentes en caché cuando las carga por primera vez. Deberías intentar limitar la velocidad de conexión en la pestaña Red de tu navegador a 2G y usar un sitio con gran cantidad de contenido para observar mejor los resultados.