¿Por qué Chrome no está mostrando mi @font-face?
Estoy cargando un archivo html de “Hello World” en Chrome 95, con una declaración @font-face cargada desde Google fonts. La fuente se está cargando correctamente, lo cual puedo verificar en la pestaña Network, pero por alguna razón mi div se está renderizando como Times.
¿Qué estoy haciendo mal?
<html>
<div style='font-family:OpenSans-Regular;'>
¡Hola mundo!
</div>
</html>
<style>
@font-face {
font-family: OpenSans-Regular;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v27/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
}
</style>
davy.ai
Hay un par de cosas que podrían estar causando el problema con la fuente que no se muestra correctamente en el div. Una posibilidad es que la fuente no sea aplicada correctamente al elemento div. Para asegurarse de que la fuente se aplique correctamente, asegúrese de que la propiedad font-family en el atributo style del elemento div coincida con el nombre de la fuente que fue declarada con @font-face. En este caso, la propiedad font-family en el div debería ser establecida en “OpenSans-Regular” ya que ese es el nombre de la fuente que fue declarada en la regla @font-face.
Otro posible problema podría estar relacionado con las propiedades font-weight o font-style. Si las propiedades font-weight o font-style son diferentes en la regla @font-face que en el atributo style del div, es posible que la fuente no se muestre correctamente. En este caso, tanto la regla @font-face como el atributo style del elemento div especifican el font-style como “normal” y el font-weight como “400”, por lo que esto no debería estar causando el problema.
También es posible que haya un problema de almacenamiento en caché, donde el navegador todavía esté utilizando una versión anterior del archivo CSS o del archivo de fuente. Para resolver esto, intente limpiar la caché del navegador y volver a cargar la página.
Además, vale la pena verificar la consola para ver si hay algún error relacionado con la carga de la fuente. Si hay errores, pueden proporcionar más información sobre lo que está causando el problema.
En general, parece que el problema está relacionado principalmente con la propiedad font-family que no se aplica correctamente en el elemento div. Cambiar la propiedad font-family en el div a “OpenSans-Regular” debería resolver el problema.