¿Incluyendo enlace o importación de fuentes web de Google?

190

¿Cuál es la forma preferida de incluir fuentes web de Google en una página?

  1. a través de la etiqueta de enlace?

    <link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'stylesheet' type = 'text / css'>

  2. mediante importación en una hoja de estilo?

    @import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

  3. o use el cargador de fuentes web

    https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts kajo
fuente
3
Es posible que también desee leer esta pregunta antes de usar las fuentes de Google. dependiendo del proyecto específico, puede que no siempre sea la elección inteligente.
Obmerk Kronen

Respuestas:

285

Para más del 90% de los casos, es probable que desee la <link>etiqueta. Como regla general, debe evitar las @importreglas porque difieren la carga del recurso incluido hasta que se recupere el archivo ... y si tiene un proceso de compilación que "aplana" las @ import, entonces crea otro problema con las fuentes web : los proveedores dinámicos como Google WebFonts sirven versiones de las fuentes específicas de la plataforma, por lo que si simplemente integra el contenido, terminará con las fuentes rotas en algunas plataformas.

Ahora, ¿por qué usarías el cargador de fuentes web? Si necesita un control completo sobre cómo se cargan las fuentes. La mayoría de los navegadores diferirán pintando el contenido en la pantalla hasta que se descargue y aplique todo el CSS, esto evita el problema de "flash de contenido sin estilo". La desventaja es que ... puede tener una pausa adicional y demora hasta que el contenido sea visible. Con el cargador JS, puede definir cómo y cuándo las fuentes se hacen visibles ... por ejemplo, incluso puede desvanecerlas después de pintar el contenido original en la pantalla.

Una vez más, el caso del 90% es la <link>etiqueta: use un buen CDN y las fuentes se reducirán rápidamente y, lo que es más probable, saldrán del caché.

Para obtener más información y una mirada en profundidad a las fuentes web de Google, vea este video GDL

igrigorik
fuente
1
"porque aplazan la carga del recurso incluido hasta que se recupera el archivo", ¿no es una buena razón para usar @import? Porque normalmente no quieres ver el contenido hasta que la fuente se haya cargado (para evitar ese parpadeo)
Alex
2
La API de fuentes web es muy útil cuando se trabaja con HTML5 Canvas. No puede usar una fuente que no haya terminado de cargarse antes de dibujar texto con ella y, por supuesto, una vez que se carga la fuente, no se actualiza automáticamente. De manera relacionada, la API es necesaria para rastrear el progreso de la carga de activos, por ejemplo, en un juego.
rvighne
14
Esta información debe estar en la página de fuentes web de Google. Simplemente le presenta las tres opciones, y no da pistas útiles sobre cuál usar y cuándo.
Gal
55
El tutorial de introducción de Google utiliza solo el <link>método, así que supongo que es el que recomiendan de manera tácita
James Cushing,
2
Es posible que también desee agregar rel="preload"a la <link>etiqueta, porque la fuente se cargará antes de que aparezca el texto. Ver 3perf.com/blog/link-rels
Elijah Mock el
3

Use el <link>proporcionado por Google porque hay una versión en la fuente, pero justo encima usa la función de preconexión de HTML5 para solicitar a los navegadores que abran una conexión TCP y negocien SSL por adelantado con fonts.gstatic.com. Aquí hay un ejemplo, que obviamente debe residir en su <head></head>etiqueta:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
fuente
¿Es correcto que la conexión previa sea un dominio completamente diferente al enlace de la hoja de estilo en su ejemplo? fonts.gstatic.comversusfonts.googleapis.com
BadHorsie
1
@BadHorsie es todo el punto. La hoja de estilo en fonts.googleapis.com tiene un enlace a un recurso en fonts.gstatic.com. Le está diciendo al navegador que inicie una conexión con el último host para que se haya conectado o haya comenzado a conectarse cuando encuentre el enlace en la hoja de estilo.
Mark Cilia Vincenti
3

Si le preocupa el SEO (Search Engine Optimization) y el rendimiento, es bueno usar la <link>etiqueta porque puede precargar la fuente.

Ejemplo:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Para obtener más información, lea esto: https://ashton.codes/preload-google-fonts-using-resource-hints/

langosta
fuente