sans - ¿Incluye el enlace Google Web Fonts o la importación?
google logo font (1)
Para el 90% + de los casos, es probable que desee la etiqueta <link> . Como regla general, quiere evitar @import rules porque difieren la carga del recurso incluido hasta que el archivo se recupera ... y si tiene un proceso de compilación que "aplana" las @importaciones, entonces crea otro problema con webfonts: los proveedores dinámicos como Google WebFonts sirven versiones específicas de la plataforma de las fuentes, de modo que si simplemente inserta el contenido en línea, terminará con 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 postergarán la pintura del contenido en la pantalla hasta que se descargue y aplique todo el CSS, lo que evita el problema del "destello del contenido sin estilo". La desventaja es ... es posible que tenga una pausa adicional y demora hasta que el contenido esté visible. Con el cargador JS, puede definir cómo y cuándo las fuentes se vuelven visibles. Por ejemplo, puede incluso fundirlas después de que el contenido original se haya pintado en la pantalla.
Una vez más, el caso del 90% es la etiqueta <link> : use un buen CDN y las fuentes bajarán rápido y aún más probablemente, serán servidas fuera del caché.
Para obtener más información y un vistazo en profundidad a Google Web Fonts, consulte este video GDL: https://www.youtube.com/watch?v=sqesm0euf9M
¿Cuál es la forma preferida de incluir Google Web Fonts en una página?
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''>
a través de la importación en una hoja de estilo?
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);
o use el cargador de fuentes web