¿Cómo eliminar la fuente predeterminada en el navegador mientras se carga @ font-face en CSS? "FOUT"

Question

Estoy cargando dos fuentes externas a mi página web usando @ font-face. Se cargan perfectamente en Chrome, pero cuando pruebo IE, el navegador muestra algunas fuentes predeterminadas mientras la página se está cargando, y las fuentes cambian a las correctas según mi css @ font-face.

¿Cómo puedo eliminar la fuente predeterminada para que no aparezca en IE y otros navegadores mientras se carga la página? Quiero eliminar el llamado FOUT (flash de texto sin estilo). ¿Hay alguna forma de hacerlo a través de la hoja de estilos?

¡Gracias por cualquier ayuda!

Answer 1

Puede usar una transición CSS para fundir el texto después de N milisegundos o lo que crea que es suficiente para cargar los recursos de la fuente. css3 transition animation on load?

Answer 2

para la fuente del navegador por defecto que no desea, establezca la propiedad CSS para font-size0px y asegúrese de que ha declarado el font-size en sus @font-face nombre de clase CSS reglas.

Si también desea abordar esto con un script dedicado para abordar este problema (Firefox 3.5/3.6 o Internet Explorer 7-9), consulte la FOUT-B-Gone solución de JavaScript.