¿Por qué es Chrome no mostrar mi @font-face?

Question 1

Estoy cargando un Hello World archivo html en Chrome 95, con una declaración de @font-face cargado de fuentes de Google. La fuente es correctamente la carga, que puedo comprobar en la ficha Red, pero por alguna razón mi div es la representación de los Tiempos.

¿Qué estoy haciendo mal?

<html>
<div style='font-family:OpenSans-Regular;'>
    Hello World!
</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>

Question 2

A partir de fuentes de Google documento, usted debe utilizar <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> en lugar de escribir directamente a ellos.

Su <style> los elementos están en el lugar equivocado, no hay <body> elemento de HTML.

<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

        <style>
            * {
                font-family: "Open Sans";
            }
        </style>
    </head>
    <body>
        <div style='font-family:Open Sans'>
            Hello World!
        </div>
    </body>
</html>

vee · Answer 1 · 2021-11-23T03:23:17

A partir de fuentes de Google documento, usted debe utilizar <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> en lugar de escribir directamente a ellos.

Su <style> los elementos están en el lugar equivocado, no hay <body> elemento de HTML.

<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

        <style>
            * {
                font-family: "Open Sans";
            }
        </style>
    </head>
    <body>
        <div style='font-family:Open Sans'>
            Hello World!
        </div>
    </body>
</html>

¿Por qué es Chrome no mostrar mi @font-face?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría