javascript - storybook - import font css ttf

Webfonts o fuentes cargadas localmente?

Question

Desde que surgieron los problemas con el uso de Cufon me aventuré a no usar recursos de fuentes externas, pero últimamente he estado buscando métodos alternativos para cargar fuentes y ver si hay una mejor manera; mejores métodos tienen una forma de aparecer de la nada.

Hay muchos métodos nuevos y variaciones para cada método; ¿Debo usar typekit ? o google webfonts (con js o css)? ¿Debería seguir usando las fuentes de carga local (por ejemplo, el método generado por fontsquirrel.com)?

Voy a enumerar los métodos que parecen más bien recibidos a continuación, con algunas pruebas, pero ¿realmente vale la pena trasladarse a un webfont? Parece que llevaría una mayor carga de recursos (solicitudes http) y tiene menos tipos de formatos de archivo (menos compatibilidad), etc. Pero parece que los archivos se cargan de manera asíncrona y de manera eficiente en la mayoría de los casos.

1. ¿Es solo una cuestión de situación y necesidad? Si es así, ¿Que son?
2. ¿Hay diferencias drásticas entre estos métodos?
3. ¿Hay algún método mejor que no haya enumerado?
4. ¿Cuáles son los pros / contras para el rendimiento? ¿Mira? dependencias? compatibilidades?

Realmente estoy buscando las mejores prácticas aquí, el rendimiento es una gran cosa, pero también lo es la escalabilidad y la facilidad de uso. Sin mencionar, mirar y sentir.

Google CSS

• solo usa hojas de estilo externas
• solo usa el tipo de archivo compatible más pequeño
• puede usar @import o <link> o tomar los contenidos del styleshee ( @font-face ) y ponerlo directamente en su propia hoja de estilo.

resultados de la prueba

  78ms load of html
  36ms load of css

Método Google JS

• usa webfont.js para cargar styleshet
• solo usa el tipo de archivo compatible más pequeño
• Anexa :root elemento :root con clase
• agrega script a la cabeza.

resultados de la prueba

    171ms load of html
    176ms load of js
    32ms load of css

Método de Typekit

• Anexa :root elemento :root con clase.
• puede usar *.js snippet o archivo cargado externamente *.js file
• usa data:font/opentype lugar de archivo de fuente.
• agrega script a la cabeza
• agrega css incrustado a la cabeza

• agrega una hoja de estilo externa a la cabeza

  puede agregar / eliminar / ajustar fácilmente las fuentes y los selectores seleccionados desde typekit.com

resultados de la prueba

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

... y el Método Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

... o con datos: método de fuente ...

@font-face {
    font-family: ''open_sanslight'';
    src: url(''opensans-light-webfont-f.eot'');
}

@font-face {
    font-family: ''open_sanslight'';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format(''woff''),
         url(''opensans-light-webfont-f.ttf'') format(''truetype''),
         url(''opensans-light-webfont-f.svg#open_sanslight'') format(''svg'');
    font-weight: normal;
    font-style: normal;

}

Answer 1

Bueno, como estás después

... buscando las mejores prácticas aquí, el rendimiento es una gran cosa, pero también lo es la escalabilidad y la facilidad de uso. Sin mencionar, mirar y sentir.

la respuesta es (como siempre en diseño web): ¡Depende!

Una cosa es segura, es que no recomendaría usar el enfoque JS (que se muestra en su segundo ejemplo).

Personalmente, me desagrada hacer cosas de presentación y estilos de CSS dependiendo de Javascript, aunque la gran mayoría de los usuarios lo tienen habilitado. Es una cuestión de no mezclar cosas.

Y como puede ver en su ejemplo dado, hay algún tipo de FOUC (paquete de contenido sin estilo), porque la página ya está representada por el navegador antes de que la fuente esté disponible. Tan pronto como sea, la página se vuelve a dibujar. ¡Y cuanto más grande sea el sitio, mayor será el impacto (de rendimiento)!

Por lo tanto, nunca usaría ninguna solución JS para la incrustación de fuentes.

Ahora echemos un vistazo a los métodos puros de CSS.
Desde hace bastante tiempo aquí hay una discusión sobre "vs. @import". Personalmente prefiero evitar el uso de @import y siempre uso <link> solamente. Pero esto es principalmente una cuestión de preferencias personales. ¡Lo único que nunca debes hacer es mezclarlos a los dos!

Local vs. CDN
Al decidir si alojar sus archivos de fuentes localmente o usar un CDN, entonces en realidad depende principalmente de la cantidad de fuentes diferentes y de las fuentes respectivas que desea incrustar.

¿Por qué es esto importante o juega un papel?
Desde el punto de vista del rendimiento, recomendaría incluir la fuente Base64 codificada en su (una) hoja de estilo. Pero solo el formato .woff, ya que es utilizado por casi todos los navegadores modernos, lo que significa para la mayoría de sus visitantes. Para todos los demás usuarios vive con la solicitud adicional.

Pero debido a la "sobrecarga" causada por la codificación Base64 y el tamaño de un archivo de fuente (incluso en formato .woff), esta técnica solo debe utilizarse si no tiene más de 3 o 4 fuentes diferentes. Y siempre asegúrese de que su servidor entregue los archivos (CSS) en formato gzip.

La gran ventaja de hacerlo es que no tiene una solicitud adicional para el archivo de fuente. Y después de la carga de la primera página (sin importar qué página de su sitio) el archivo CSS se almacena en caché. Esto también es una ventaja si usa la memoria caché de aplicaciones HTML5 (que seguramente hará).

Además del hecho de que un autor no debe usar más de un máximo de 3 o 4 fuentes diferentes en su sitio, echemos un vistazo al método de uso de CDN de Google.

En primer lugar, tenga en cuenta que puede (y siempre debe) incluir todas las fuentes deseadas en un solo <link> , como se muestra a continuación:

<link href=''http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez'' rel=''stylesheet'' type=''text/css''>

Esto dará como resultado la siguiente respuesta:

@font-face {
  font-family: ''Montez'';
  font-style: normal;
  font-weight: 400;
  src: local(''Montez''), local(''Montez-Regular''), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Sans'';
  font-style: normal;
  font-weight: 400;
  src: local(''PT Sans''), local(''PTSans-Regular''), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Sans'';
  font-style: normal;
  font-weight: 700;
  src: local(''PT Sans Bold''), local(''PTSans-Bold''), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Sans'';
  font-style: italic;
  font-weight: 400;
  src: local(''PT Sans Italic''), local(''PTSans-Italic''), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Sans'';
  font-style: italic;
  font-weight: 700;
  src: local(''PT Sans Bold Italic''), local(''PTSans-BoldItalic''), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Serif'';
  font-style: normal;
  font-weight: 400;
  src: local(''PT Serif''), local(''PTSerif-Regular''), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Serif'';
  font-style: normal;
  font-weight: 700;
  src: local(''PT Serif Bold''), local(''PTSerif-Bold''), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Serif'';
  font-style: italic;
  font-weight: 400;
  src: local(''PT Serif Italic''), local(''PTSerif-Italic''), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format(''woff'');
}
@font-face {
  font-family: ''PT Serif'';
  font-style: italic;
  font-weight: 700;
  src: local(''PT Serif Bold Italic''), local(''PTSerif-BoldItalic''), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format(''woff'');
}

Como puede ver, hay 9 archivos de fuentes diferentes, lo que significa un total de 10 (incluido el elemento de enlace) solicitudes, si el usuario no tiene una o más de las fuentes solicitadas instaladas localmente. Y estas solicitudes se repiten en cada nueva solicitud de página a su sitio (¡aunque no se transfieren más datos)! Además, la respuesta a la solicitud del <link> nunca se almacena en caché.

Recomendación:
Después de todo, realmente recomendaría incluir su archivo de fuente en formato .woff Base64 codificado en su hoja de estilo.

¡Vea este buen artículo para ver un ejemplo y una descripción de cómo hacerlo!

Answer 2

Creo que has abordado los tiempos de carga muy bien en tu pregunta. Desde mi punto de vista, hay algunas fuentes que deberían agregarse a la lista, y algunas otras consideraciones que deberían examinarse para obtener una vista completa de las opciones.

Algunas otras fuentes de fuentes acreditadas

nube.tipografía

http://www.typography.com/cloud/

Por lo que puedo decir, las fuentes se incrustan como datos en un archivo CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Aquí están mis especificaciones:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Aquí está su descripción de alto nivel de su despliegue .

Fonts.com

No he usado este servicio, pero son un proveedor de fuentes muy establecido, y la información que enumeraron en su sitio es bastante impresionante. No tengo especificaciones sobre sus métodos exactos, pero esto es lo que sé que tienen:

• Algunas de las fuentes más conocidas del mundo disponibles
• Una biblioteca de fuentes realmente grande (más de 20,000)
• Descargas de fuentes de escritorio para hacer maquetas
• Una herramienta personalizada para probar fuentes web en el navegador
• Controles de tipografía fina y subconjunto
• Opciones de autohosting

FontSpring

Afiliado a FontSquirrel. Las fuentes se pueden comprar aquí por un precio fijo. Los archivos de fuentes que acompañan a CSS se entregan, para ser implementados en su propio servidor, al igual que FontSquirrel.

Especificaciones ampliadas

En cuanto a los pros y los contras generales de cada servicio de fuente, aquí hay algunas comparaciones:

Tamaño de la biblioteca de fuentes

• Fonts.com: 20,000+
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : más de 600
• Typekit : 900+
• Typography.com (cloud.typography.com): probablemente 300+ (35 familias)

Precios

• Fonts.com : $ 20 / mes por 500,000 páginas vistas
• FontSpring : varía según la fuente (compra única de fuentes)
• FontSquirrel : Gratis
• Google : Gratis
• Typekit : $ 4 / mes por 500,000 páginas vistas
• Typography.com : $ 12.50 / mes por 1,000,000 de páginas vistas

Calidad de fuente

La calidad de las fuentes web puede variar bastante. Esto puede abarcar cosas como las formas de letra en sí o el espaciado o el tamaño del juego de caracteres. Todos estos determinan la impresión general de calidad que dará una fuente. Si bien las opciones gratuitas tienen algunas buenas opciones, también tienen algunas fuentes que no son de alta calidad, por lo que debe elegir cuidadosamente de esas fuentes.

• Fonts.com : Alto
• FontSpring : mezclado a alto
• FontSquirrel : mixto
• Google : mixto
• Typekit : Alto
• Typography.com : Muy alto (le doy a esto una designación "muy alta" porque Fonts.com, FontSpring y Typekit admiten múltiples fundiciones de tipo, donde solo se trata de fuentes de la fundición H & FJ, que se encuentra entre las mejores del mundo)

Font Quality II: Tipografía

Hay muchos refinamientos en la tipografía de escritorio que han sido muy difíciles de obtener en fuentes web. Algunos de estos servicios ofrecen formas de entregarlos.

• Fonts.com : interletraje, espacios de letras, ligaduras, caracteres alternos, fracciones, etc.
• FontSpring : ninguno
• FontSquirrel : Ninguno
• Google : ninguna
• Typekit : Ninguno
• Typography.com : small caps, ligatures, alternate characters, alternate number styles, fractions, etc.

Soporte del navegador

Esto se debe principalmente a los formatos de fuente que son compatibles con cada servicio. Los principales son:

• EOT: para Internet Explorer (IE 4+)
• TrueType y OpenType: formatos tradicionales (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: Nuevo estándar para fuentes web (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

Más información en The @ Font-Face Rule And Useful Web Font Tricks

Todos estos servicios admiten los principales formatos de fuente. Con fuentes autohospedadas, siempre que use la sintaxis correcta debería estar cubierto. Aquí hay una actualización de 2011 de la sintaxis a prueba de balas de FontSpring :

@font-face {
  font-family: ''MyWebFont'';
  src: url(''webfont.eot''); /* IE9 Compat Modes */
  src: url(''webfont.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
       url(''webfont.woff'') format(''woff''), /* Modern Browsers */
       url(''webfont.ttf'')  format(''truetype''), /* Safari, Android, iOS */
       url(''webfont.svg#svgFontName'') format(''svg''); /* Legacy iOS */
  }

Rendimiento I: Descargas

Por lo que yo entiendo, el uso de la sintaxis anterior permite a los navegadores obtener el formato específico que funciona para ellos, por lo que no hay descargas desperdiciadas en formatos de fuentes que no funcionan.

Los servicios pagos como Fonts.com, Typekit o Typography.com usan métodos para detectar el formato correcto y luego entregan el formato de fuente correcto, a menudo como datos base64 en un archivo CSS.

Por lo que puedo ver, las diferencias en los métodos que mencionó anteriormente son bastante insignificantes para los usuarios de Internet de alta velocidad (parece una diferencia de <200ms), pero podría valer la pena considerarlos para dispositivos en redes más lentas, especialmente para hits de página no almacenados en caché.

Performance II: subconjunto

Si sabe que solo habrá ciertos caracteres que quiera usar, puede construir su fuente con un subconjunto de caracteres y así reducir el tamaño de la descarga.

• Fonts.com : control muy detallado
• FontSpring : puede recompilar como subconjunto a través del generador de fuentes web FontSquirrel
• FontSquirrel : puede recompilar como subconjunto a través del generador de webfont
• Google : control muy detallado
• Typekit : opciones limitadas de "todos los personajes" o "predeterminado"
• Typography.com : control muy detallado

Rendimiento III: Entrega

• Fonts.com : Global CDN o su propio servidor
• FontSpring : basado en su servidor
• FontSquirrel : basado en tu servidor
• Google : Super-CDN global
• Typekit : Global CDN
• Typography.com : CDN global (125,000 servidores)

Ayuda de idioma

• Fonts.com : 40 idiomas, incluidos Asia y Medio Oriente
• FontSpring : Western, dependiendo de la fuente
• FontSquirrel : occidental, dependiendo de la fuente
• Google : occidental, dependiendo de la fuente
• Typekit : Western, dependiendo de la fuente
• Typography.com : occidental, dependiendo de la fuente

Pruebas e Implementación

• Fonts.com : muy fácil, con herramientas extensas y personalizables
• FontSpring : Técnico (hágalo usted mismo)
• FontSquirrel : Técnico (hágalo usted mismo)
• Google : fácil
• Typekit : Fácil
• Typography.com : pruebas fáciles, un poco más complicado para cambiar una vez implementado

Answer 3

La mejor opción es importar las fuentes usando ajax, como esta:

<script>
    (function() {
        var font = document.createElement(''link''); 
        font.type = ''text/css''; 
        font.rel = ''stylesheet'';
        font.href = ''/url/to/font.css'';
        var s = document.getElementsByTagName(''link'')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Hago esto en mi página web y aumento 9 puntos en la prueba de Google Insights.

Answer 4

Personalmente utilizo Google Fonts. Tienen una buena variedad de opciones y recientemente han mejorado la compresión de las fuentes moviéndose a la compresión Zopfli también. Google se esfuerza por hacer que la Web sea más rápida, por lo que creo que también se obtendrá una mayor optimización de esa parte.

Independientemente de lo que elija como una fuente externalizada, siempre obtendrá reducciones en la velocidad de las solicitudes para obtener las fuentes. Lo mejor, visto desde una perspectiva de velocidad, sería servir las fuentes usted mismo. Si no le importan esos milisegundos adicionales que se necesitan para cargar desde una entrega subcontratada, debe continuar con eso si cree que la facilidad de usarlos vale milisegundos.

No sé sobre Typekit y los demás, pero con Google Fonts puede elegir que se le sirvan subconjuntos específicos y una variedad de caracteres para acelerar aún más la entrega.

Elegir un subconjunto:

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

Elegir un rango de personajes:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Puede usar dns-prefetch para mejorar las velocidades aún más con la entrega de fuentes.

Creo, y espero, que Google hará todo lo posible para acelerar la entrega de fuentes tanto como puedan. Los milisegundos que lleva cargarlos no perjudican a mi sitio web, así que felizmente los uso.

Larga historia corta:

Si las tomas de entrega de la fuente de milisegundos están perjudicando su sitio, por ejemplo, haciendo que cargue más de 1 segundo recomendado, creo que debe alojarlas usted mismo.

Answer 5

Primero, aclararé algo sobre la oferta de Google. En realidad cargará el formato más pequeño que su navegador pueda manejar. WOFF ofrece tamaños de archivo pequeños, y su navegador lo admite, por lo que es el que ve. WOFF también es bastante ampliamente compatible. Sin embargo, en Opera, por ejemplo, probablemente obtendrá la versión TrueType de la fuente.

La lógica del tamaño del archivo también es, creo, por qué Font Squirrel los prueba en ese orden. Pero eso es principalmente especulación de mi parte.

Si está trabajando en un entorno en el que cada solicitud y byte cuenta, tendrá que hacer algunos perfiles para descubrir cuál funciona mejor para su caso de uso. ¿La gente solo verá una página y nunca volverá a visitarla? Si es así, las reglas de caché no importan tanto. Si están navegando o regresando, Google podría tener mejores reglas de almacenamiento en caché que su servidor. ¿La latencia es el problema mayor o el ancho de banda? Si hay latencia, apunte a un menor número de solicitudes, así que hágalo localmente y combine los archivos tanto como sea posible. Si ancho de banda, vaya con la opción que termine con el código más pequeño y el formato de fuente más pequeño.

Ahora, a la consideración CSS vs JS. Veamos la siguiente pieza de HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement(''script'');
            wf.src = ''script2.js'';
            wf.type = ''text/javascript'';
            wf.async = ''true'';
            var s = document.getElementsByTagName(''script'')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

En muchos casos, script1 , style1 y style2 estarían bloqueando. Esto significa que el navegador no puede continuar mostrando el documento hasta que ese recurso se haya cargado (aunque los navegadores modernos lo manipulan un poco). Lo que en realidad puede ser algo bueno, especialmente con las hojas de estilo. Evita un destello de contenido sin estilo, y también evita el cambio gigante que ocurriría al aplicar los estilos (y el cambio de contenido es realmente molesto como usuario).

Por otro lado, script2 no estaría bloqueando. Se puede cargar más tarde y el navegador puede pasar a analizar y mostrar el resto del documento. Entonces eso también puede ser beneficioso.

Específicamente hablando de fuentes (y aún más específicamente, de la oferta de Google), probablemente me quedaré con un método CSS (me gusta @import porque sigue estilizando con la hoja de estilos, pero podría ser solo yo). El archivo JS cargado por el script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) es más grande que la declaración @font-face , y parece mucho más trabajo. Y no creo que cargar la fuente real en sí (el WOFF o TTF) sea bloqueante, por lo que no debería demorar demasiado las cosas. Personalmente no soy un gran admirador de los CDN, pero el hecho es que son REALMENTE rápidos. Los servidores de Google vencerán a la mayoría de los planes de alojamiento compartido por un deslizamiento de tierra, y debido a que sus fuentes son tan populares, la gente podría incluso tenerlas en la memoria caché.

Y eso es todo lo que tengo.

No tengo experiencia con Typekit, así que lo dejé fuera de mi teoría. Si hay imprecisiones, sin contar las generalizaciones entre los navegadores por razones de argumentos, indíquelas.

Answer 6

Uso el método css en línea porque la sobrecarga de la solicitud adicional es mayor que el aumento de tamaño cuando se codifica bease64. Esto también se compensa con la compresión de gizip por parte del servidor de los archivos css.

Otra opción es utilizar la carga asíncrona de fuentes, pero la mayoría de las veces los usuarios verán las fuentes aparecer después de la carga.

Independientemente del método, puede reducir el tamaño del archivo de fuente incluyendo solo los juegos de caracteres que usará.