Este es un ejemplo sencillo de cómo utilizar el Open Sans de la API de Google.
El comportamiento esperado es mostrar la primera línea más ligero ( font-weight 300 ), a continuación, el segundo.

Tan lejos como Windows, este funciona en las versiones actuales de FF y Borde, pero no en Google Chrome. Un navegador muestra el apartado con el mismo estilo normal en lugar de utilizar la luz, uno para el primer párrafo.

<head>
    <meta charset="utf-8" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>


<body>
    <p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
    <br>
    <p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>

ACTUALIZACIÓN:

Como esta pregunta sugiere, el problema es debido a un conflicto con las fuentes instaladas localmente.
De hecho, observar la llamada a ‘local‘ fuentes de la API de Google:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Simplemente quitar el local de la fuente no es realmente una solución porque:

  1. si estaba allí es probablemente debido a que algunas de las necesidades del programa es
  2. pidiendo a los usuarios de un sitio web para eliminar sus fuentes no es una opción.

Por lo tanto, el problema persiste:

Cómo hacer que esto funcione en Chrome (para cualquier usuario)? Y por qué otros navegadores manejan ignorando el local de la fuente?

se está trabajando para mí: jsfiddle.net/70axnLve – Google Chrome: 48.0.2564.109 m
su violín no se carga la fuente, aquí es un el violín la carga de la fuente
Veo el error ahora en inspeccionar, pero otra vez lo mismo de su violín es demasiado!
gracias por el violín, es exactamente el problema descrito y comportamiento: funciona en FF y no en Chrome, al menos como yo lo veo.
a mi me funciona en mi violín, ¿tiene esta fuente de instalar localmente ?

OriginalEl autor Niccolò | 2016-02-11

1 Comentario

  1. 5

    Una simple solución que resuelve este problema para mí fue copiar el código CSS de la fuente de Google incrustar código, colóquelo en su propio CSS y, a continuación, simplemente quite el local(…) de fuentes.

    Como este:

    @font-face {
       font-family: 'Open Sans Light';
       font-style: normal;
       font-weight: 300;
       src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
    }

    Tengo instalada la fuente localmente, y este método parece funcionar en Chrome (y Firefox, IE, y el Borde).

    OriginalEl autor Kim Jensen

Dejar respuesta

Please enter your comment!
Please enter your name here