webfonts - ¿Cómo puedo usar solo el subconjunto de latín con los archivos WOFF2 de Google Fonts?

google-font-api

Question

Quería agregar una fuente con Google Fonts, y he notado un comportamiento extraño.

Quiero agregar una fuente con solo el subconjunto latino, no quiero el subconjunto latin-ext, cyrillic o cyrillic-ext, para aclarar el código. Entiendo que ese es el comportamiento predeterminado, así que he hecho esto:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">

En Firefox (y en los otros navegadores que no admiten WOFF2), obtengo una salida correcta:

@font-face {
    font-family: ''Philosopher'';
    font-style: normal;
    font-weight: 400;
    src: local(''Philosopher''), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format(''woff'');
}

Pero en Chrome, obtengo esto:

/* cyrillic */
@font-face {
    font-family: ''Philosopher'';
    font-style: normal;
    font-weight: 400;
    src: local(''Philosopher''), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format(''woff2'');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: ''Philosopher'';
    font-style: normal;
    font-weight: 400;
    src: local(''Philosopher''), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.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;
}

Pensé, tal vez el subconjunto latino ya no es un comportamiento predeterminado, así que agregué a mi <link> el parámetro GET del subset :

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin">

Pero no cambió la salida. Cuando voy con un &subset=cyrillic , cambia en Firefox, pero la salida de Chrome es la misma.

¿Hay alguna forma de generar solo el subconjunto latino?

¿O es solo que el WOFF2 y el rango Unicode no se descargarán si no hay necesidad en la página? Y en este último caso, la ganancia de eliminar la llamada cirílica es solo de 8 líneas de código en el archivo css, es decir, de ~ 300 bytes, y simplemente no vale nada.

Answer 1

El truco está en esta optimización:

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

Con esto, el navegador sabe si necesita descargar la fuente, dependiendo de los caracteres que acaba de cargar en el html. Chrome es actualmente el único con soporte completo para esto .

MDN Firefox 36+ ignora por completo esta especificación, por lo tanto, Google Fonts tiene que proporcionarle una especificación de fuente mínima. Lo mismo ocurre con Safari.

De todos modos, fue un interesante viaje de 30 minutos en Internet que espero ayude a cualquier otro viajero de Internet. Esto debería darle importancia a por qué podría usar Google Fonts como un CDN para alojar fuentes para un rendimiento óptimo en lugar de servirlo usted mismo.