De Programacion

Las mejores estrategias de carga de fuentes y cómo ejecutarlas

Zach Leatherman redactó una lista completa de estrategias de carga de fuentes que se han compartido ampliamente en el campo del desarrollo web. Eché un vistazo a esta lista antes, pero me asusté tanto (y me confundí) que decidió no hacer nada en absoluto. No sé cómo empezar a cargar fuentes de la mejor manera y no quiero sentirme como un idiota leyendo esta lista.

Hoy me di tiempo para sentarme y resolverlo. En este artículo, quiero compartir contigo las mejores estrategias de carga y cómo ejecutarlas todas.

Las mejores estrategias

Zach recomienda dos estrategias en su artículo:

  1. FOUT with Class : el mejor enfoque para la mayoría de situaciones. (Esto funciona ya sea que utilicemos una empresa de alojamiento de fuentes o que alojemos nuestras propias fuentes).
  2. FOFT crítico : enfoque de mayor rendimiento. (Esto solo funciona si cuidado nuestras propias fuentes).

Antes de profundizar en estas dos estrategias, debemos aclarar las siglas para que comprenda lo que dice Zach.

FOIT, FOFT, FOFT

Las siglas son las siguientes:

  • FOIT significa destello de texto invisible . Cuando se cargan las fuentes web, ocultamos el texto para que los usuarios no vean nada. Solo mostramos el texto cuando se cargan las fuentes web.
  • FOUT significa destello de texto sin estilo . Cuando se cargan las fuentes web, mostramos a los usuarios una fuente del sistema. Cuando se carga la fuente web, volvemos a cambiar el texto a la fuente web deseada.
  • FOFT significa destello de texto falso . Esto es complicado y merece más explicación. Hablaremos de ello en detalle cuando lleguemos a la sección FOFT.

Fuentes autohospedadas frente a fuentes alojadas en la nube

Hay dos formas principales de alojar fuentes:

  1. Utilice un proveedor de nube.
  2. Autoaloja las fuentes.

La forma en que cargamos las fuentes difiere mucho según la opción que elija.

Cargar fuentes con fuentes alojadas en la nube

A menudo es más fácil alojar fuentes en la nube. El proveedor nos dará un enlace para cargar las fuentes. Simplemente podemos insertar este enlace en nuestro HTML y obtendremos nuestra fuente web. A continuación se muestra un ejemplo en el que ahora cargamos fuentes web desde Adobe Fonts (anteriormente conocido como Typekit).

link rel="stylesheet" href="https://use.typekit.net/your-kit-id.css"

Desafortunadamente, este no es el mejor enfoque. O hrefbloquea el navegador. Si la carga de la fuente web se bloquea, los usuarios no podrán hacer nada mientras esperan.

Typekit solía proporcionar JavaScript que cargaba una fuente de forma asincrónica. Es una pena que ya no muestren esta versión de JavaScript. (Sin embargo, el código todavía funciona, pero no tengo idea de cuándo dejará de funcionar o si dejará de funcionar).

Cargar fuentes de Google Fonts es ligeramente mejor porque proporciona font-display: swap. Aquí hay un ejemplo donde cargamos Lato desde Google Fonts. (El display=swapparámetro disparado font-display: swap).

link  href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700display=swap"  rel="stylesheet"/

Cargando fuentes con fuentes autohospedadas

Solo puedes alojar tus fuentes por tu cuenta si tienes la licencia para hacerlo . Dado que las fuentes pueden ser costosas, la mayoría de las personas optan por utilizar un proveedor de nube.

Sin embargo, existe una forma económica de obtener fuentes. Design Cuts ofrece ofertas de fuentes ocasionalmente en las que puedes obtener fuentes de increíblemente alta calidad por solo $ 29 por paquete. Cada paquete puede contener hasta 12 fuentes. Logré conseguir clásicos como Claredon, DIN, Futura y una gran cantidad de fuentes con las que puedo jugar consultando su boletín para estas ofertas.

Si queremos autohospedar fuentes, debemos comprender dos conceptos más: @font-facey font-display: swap.

@font-face

@font-faceVamos a declarar fuentes en CSS. Si queremos autohospedar fuentes, debemos usar @font-facepara declarar sus fuentes.

En esta declaración podemos especificar cuatro cosas:

  • font-family: Esto le dice a CSS (y JavaScript) el nombre de nuestra fuente.
  • src: Ruta para encontrar la fuente para poder cargarla
  • font-weight: El peso de la fuente. El valor predeterminado es 400 si se omite.
  • font-style: si se debe poner en cursiva la fuente. El valor predeterminado es normal si se omite.

Para src, necesitamos especificar varios formatos de fuente. Para un nivel práctico de soporte del navegador, podemos usar woff2y woff.

Aquí hay un ejemplo donde cargamos Lato mediante @font-face.

@font-face {  font-family: Lato;  src: url('path-to-lato.woff2') format('woff2'),       url('path-to-lato.woff') format('woff');}@font-face {  font-family: Lato;  src: url('path-to-lato-bold.woff2') format('woff2'),       url('path-to-lato-bold.woff') format('woff');  font-weight: 700;}@font-face {  font-family: Lato;  src: url('path-to-lato-italic.woff2') format('woff2'),       url('path-to-lato-italic.woff') format('woff');  font-style: italic;}@font-face {  font-family: Lato;  src: url('path-to-lato-bold-italic.woff2') format('woff2'),       url('path-to-lato-bold-italic.woff') format('woff');  font-weight: 700;  font-style: italic;}

Si no tiene woff2archivos woff, puede cargar sus archivos de fuentes (ya sean Opentype o Truetype) en un generador de fuentes para obtenerlos.

A continuación, declaramos la fuente web en una font-familypropiedad.

html {  font-family: Lato, sans-serif;}

Cuando los navegadores analizan un elemento con la fuente web, activan una descarga de la fuente web.

font-display: swap

font-displaytoma uno de los cuatro valores posibles: auto, swap, fallbacky optional. swapindica a los navegadores que muestren el texto alternativo antes de cargar las fuentes web. En otras palabras, swapactive FOUT para fuentes autohospedadas. Obtenga más información sobre otros valores en el almanaque de CSS-Tricks.

El soporte del navegador font-display: swapes bastante bueno hoy en día, por lo que podemos usarlo en nuestros proyectos.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

cromo Firefox ES DECIR Borde Safari
60 58 No 79 11.1

Móvil/Tableta

androidcromo Android Firefox androide Safari en iOS
124 125 124 11.3-11.4

FOUT contra FOUT con clase

FOUT significa destello de texto sin estilo . Siempre querrás FOUT sobre FOIT (destello de texto invisible) porque es mejor para los usuarios leer palabras escritas con fuentes del sistema en comparación con palabras escritas con tinta invisible. Mencionamos anteriormente que font-display: swaple brinda la posibilidad de usar FOUT de forma nativa.

FOUT con Class te da los mismos resultados (FOUT) pero usa JavaScript para cargar las fuentes. La mecanica es la siguiente:

  • Primero: cargue las fuentes del sistema.
  • Segundo: cargue fuentes web a través de JavaScript.
  • Tercero: cuando se cargan las fuentes web, agregue una clase a la htmletiqueta.
  • Cuarto: cambie la fuente del sistema con la fuente web cargada.

Zach recomienda cargar fuentes a través de JavaScript aunque font-display: swapdisfruta de una buena compatibilidad con el navegador. En otras palabras, Zach recomienda FOUT con Class en lugar de @font-face+ font-display: swap.

Recomendación FOUT con Class por estas tres razones:

  1. Podemos agrupar repintados.
  2. Podemos adaptarnos a las preferencias del usuario.
  3. Podemos omitir la carga de fuentes por completo si los usuarios tienen una conexión lenta.

Te dejaré profundizar en las razones en otro artículo. Mientras escribía este artículo, encontré una cuarta razón para preferir FOUT con Class: podemos omitir la carga de fuentes cuando los usuarios ya tienen la fuente cargada en su sistema . (Hacemos esto sessionStoragecomo veremos a continuación).

FOUT con Class (para fuentes alojadas en la nube)

Primero, queremos cargar nuestras fuentes como de costumbre desde su empresa de alojamiento en la nube. Aquí hay un ejemplo donde cargué Lato desde Google Fonts:

head  link    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700display=swap"    rel="stylesheet"  //head

A continuación, queremos cargar fuentes a través de JavaScript. Inyectaremos a scripten la headsección ya que la huella del código es pequeña y de todos los modos será asincrónica.

head  link    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700display=swap"    rel="stylesheet"  /  script src="js/load-fonts.js"/script/head

En load-fonts.js, queremos utilizar la API de carga de fuentes CSS para cargar la fuente. Aquí podemos usar Promise.allpara cargar todas las fuentes simultáneamente. Cuando hacemos esto, estamos agrupando repintados.

El código se ve así:

if ('fonts' in document) {  Promise.all([    document.fonts.load('1em Lato'),    document.fonts.load('700 1em Lato'),    document.fonts.load('italic 1em Lato'),    document.fonts.load('italic 700 1em Lato')  ]).then(_ = () {    document.documentElement.classList.add('fonts-loaded')  })}

Cuando se cargan las fuentes, queremos cambiar el texto del cuerpo a la fuente web. Podemos hacer esto a través de CSS usando la .fonts-loadedclase.

/* System font before [[webfont]]s get loaded */body {  font-family: sans-serif;}/* Use [[webfont]] when [[webfont]] gets loaded*/.fonts-loaded body {  font-family: Lato,  sans-serif;}

Preste aquí atención: necesitamos usar la .fonts-loadedclase con este enfoque.

No podemos escribir la fuente web directamente en body's font-family; Al hacer esto, se descargarán las fuentes, lo que significa que estás usando @font-face + font-display: swap. También significa que JavaScript es redundante.

/* DO NOT DO THIS */body {  font-family: Lato, sans-serif;}

Si los usuarios visitan páginas adicionales del sitio, ya tendrán las fuentes cargadas en su navegador. Podemos omitir el proceso de carga de fuentes (para acelerar las cosas) usando sessionStorage.

if (sessionStorage.fontsLoaded) {  document.documentElement.classList.add('fonts-loaded')} else {  if ('fonts' in document) {  Promise.all([    document.fonts.load('1em Lato'),    document.fonts.load('700 1em Lato'),    document.fonts.load('italic 1em Lato'),    document.fonts.load('italic 700 1em Lato')  ]).then(_ = () {    document.documentElement.classList.add('fonts-loaded')  })  }}

Si queremos optimizar JavaScript para mejorar la legibilidad, podemos usar un patrón de retorno temprano para reducir la sangría.

function loadFonts () {  if (sessionStorage.fontsLoaded) {    document.documentElement.classList.add('fonts-loaded')    return   }   if ('fonts' in document) {  Promise.all([    document.fonts.load('1em Lato'),    document.fonts.load('700 1em Lato'),    document.fonts.load('italic 1em Lato'),    document.fonts.load('italic 700 1em Lato')  ]).then(_ = () {    document.documentElement.classList.add('fonts-loaded')  })  }loadFonts()

FOUT con Class (para fuentes autohospedadas)

Primero, queremos cargar nuestras fuentes como de costumbre a través de @font-face. La font-display: swappropiedad es opcional ya que cargamos fuentes a través de JavaScript.

@font-face {  font-family: Lato;  src: url('path-to-lato.woff2') format('woff2'),       url('path-to-lato.woff') format('woff');}/* Other @font-face declarations */

A continuación, cargamos las fuentes web mediante JavaScript.

if ('fonts' in document) {  Promise.all([    document.fonts.load('1em Lato'),    document.fonts.load('700 1em Lato'),    document.fonts.load('italic 1em Lato'),    document.fonts.load('italic 700 1em Lato')  ]).then(_ = () {    document.documentElement.classList.add('fonts-loaded')  })}

Luego queremos cambiar el texto del cuerpo a la fuente web mediante CSS:

/* System font before webfont is loaded */body {  font-family: sans-serif;}/* Use webfont when it loads */.fonts-loaded body {  font-family: Lato,  sans-serif;}

Finalmente, omitimos la carga de fuentes para visitas repetidas.

if ('fonts' in document) {  Promise.all([    document.fonts.load('1em Lato'),    document.fonts.load('700 1em Lato'),    document.fonts.load('italic 1em Lato'),    document.fonts.load('italic 700 1em Lato')  ]).then(_ = () {    document.documentElement.classList.add('fonts-loaded')  })}

API del cargador de fuentes CSS vs.FontFaceObserver

La API CSS Font Loader tiene bastante buena compatibilidad con el navegador, pero es una API bastante irritable.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
35 41 No 79 10

Móvil/Tableta

androidcromo Android Firefox Androide Safari en iOS
124 125 124 10.0-10.2

Por lo tanto, si necesita admitir navegadores más antiguos (como IE 11 e inferiores), o si encuentra la API extraña y difícil de manejar, es posible que desee utilizar la de Bramstein FontFaceObserver. Es súper liviano por lo que no causa mucho daño.

El código se ve así. (Es mucho mejor en comparación con la API CSS Font Loader).

new FontFaceObserver('lato')  .load()  .then(_ = {    document.documentElement.classList.add('fonts-loaded')  })

Asegúrese de usarlo fontfaceobserver.standalone.jssi tiene la intención de cargar fuentes en navegadores que no admiten Promises.

FOTO

FOFT significa destello de texto falso . La idea aquí es dividir la carga de fuentes en tres etapas:

  • Paso 1: use una fuente alternativa cuando las fuentes web aún no estén cargadas.
  • Paso 2: cargue primero la versión romana (también llamada “libro” o “normal”) de la fuente . Esto reemplaza la mayor parte del texto. El navegador falsificará las negritas y cursivas (de ahí el término "texto falso").
  • Paso 3: carga el resto de fuentes

Nota: Zach también llama a este estándar FOFT .

Usando FOFT estándar

Primero, cargamos la fuente romana.

@font-face {  font-family: LatoInitial;  src: url('path-to-lato.woff2') format('woff2'),       url('path-to-lato.woff') format('woff');  unicode-range: U+65-90, U+97-122;}.fonts-loaded-1 body {  font-family: LatoInitial;}
if('fonts' in document) {  document.fonts.load("1em LatoInitial")    .then(_ = {      document.documentElement.classList.add('fonts-loaded-1')    })}

Luego, cargamos otras fuentes.

Preste atención aquí: estamos cargando Latonuevamente, pero esta vez, configuramos font-familyen Latolugar de LatoInitial.

/* Load this first */@font-face {  font-family: LatoInitial;  src: url('path-to-lato.woff2') format('woff2'),       url('path-to-lato.woff') format('woff');  unicode-range: U+65-90, U+97-122;}/* Load these afterwards */@font-face {  font-family: Lato;  src: url('path-to-lato.woff2') format('woff2'),       url('path-to-lato.woff') format('woff');  unicode-range: U+65-90, U+97-122;}/* Other @font-face for different weights and styles*/.fonts-loaded-1 body {  font-family: LatoInitial;}.fonts-loaded-2 body {  font-family: Lato;}
if ('fonts' in document) {  document.fonts.load('1em LatoInitial')    .then(_ = {      document.documentElement.classList.add('fonts-loaded-1')      Promise.all([        document.fonts.load('400 1em Lato'),        document.fonts.load('700 1em Lato'),        document.fonts.load('italic 1em Lato'),        document.fonts.load('italic 700 1em Lato')      ]).then(_ = {        document.documentElement.classList.add('fonts-loaded-2')      })    })}

Nuevamente, podemos optimizarlo para vistas repetidas.

Aquí podemos agregar fonts-loaded-2algo a htmllo inmediato ya que las fuentes ya están cargadas.

function loadFonts () {  if (sessionStorage.fontsLoaded) {    document.documentElement.classList.add('fonts-loaded-2')    return  }  if ('fonts' in document) {    document.fonts.load('1em Lato')      .then(_ = {        document.documentElement.classList.add('fonts-loaded-1')        Promise.all([          document.fonts.load('400 1em Lato'),          document.fonts.load('700 1em Lato'),          document.fonts.load('italic 1em Lato'),          document.fonts.load('italic 700 1em Lato')        ]).then(_ = {          document.documentElement.classList.add('fonts-loaded-2')          // Optimization for Repeat Views          sessionStorage.fontsLoaded = true        })      })  }}

FOFT crítico

La parte "crítica" proviene de "css crítico" (creo), donde cargamos solo CSS esencial antes de cargar el resto. Hacemos esto porque mejora el rendimiento.
Cuando se trata de tipografía, lo único crítico son las letras de la A a la Z (tanto mayúsculas como minúsculas). Podemos crear un subconjunto de estas fuentes con unicode-range.

Cuando creamos este subconjunto, también podemos crear un archivo de fuente separado con los caracteres necesarios.

Así es como @font-facese ve la declaración:

@font-face {  font-family: LatoSubset;  src: url('path-to-optimized-lato.woff2') format('woff2'),       url('path-to-optimized-lato.woff') format('woff');  unicode-range: U+65-90, U+97-122;}

Primero cargamos este subconjunto.

.fonts-loaded-1 body {  font-family: LatoSubset;}
if('fonts' in document) {  document.fonts.load('1em LatoSubset')    .then(_ = {      document.documentElement.classList.add('fonts-loaded-1')    })}

Y cargamos otros archivos de fuentes más tarde.

.fonts-loaded-2 body {  font-family: Lato;}
if ('fonts' in document) {  document.fonts.load('1em LatoSubset')    .then(_ = {      document.documentElement.classList.add('fonts-loaded-1')      Promise.all([        document.fonts.load('400 1em Lato'),        document.fonts.load('700 1em Lato'),        document.fonts.load('italic 1em Lato'),        document.fonts.load('italic 700 1em Lato')      ]).then(_ = {        document.documentElement.classList.add('fonts-loaded-2')      })    })}

Nuevamente, podemos optimizarlo para vistas repetidas:

function loadFonts () {  if (sessionStorage.fontsLoaded) {    document.documentElement.classList.add('fonts-loaded-2')    return  }  if ('fonts' in document) {    document.fonts.load('1em LatoSubset')      .then(_ = {        document.documentElement.classList.add('fonts-loaded-1')        Promise.all([          document.fonts.load('400 1em Lato'),          document.fonts.load('700 1em Lato'),          document.fonts.load('italic 1em Lato'),          document.fonts.load('italic 700 1em Lato')        ]).then(_ = {          document.documentElement.classList.add('fonts-loaded-2')          // Optimization for Repeat Views          sessionStorage.fontsLoaded = true        })      })  }}

Variantes críticas de FOFT

Zach propuso dos variantes críticas de FOFT adicionales:

  • FOFT crítico con URI de datos
  • FOFT crítico con precarga

FOFT crítico con URI de datos

En esta variante, cargamos la fuente crítica (la fuente romana subconjunto) con URI de datos en lugar de un enlace normal. Esto es lo que parece. (Y da miedo).

@font-face {  font-family: LatoSubset;  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff");  /* ... */}

Este código parece aterrador, pero no hay por qué asustarse. La parte más difícil aquí es generar el URI de datos, y CSS-Tricks lo tiene cubierto aquí.

FOFT crítico con precarga

En esta variante, agregamos un enlace con la preloadetiqueta al archivo de fuente crítico. Así es como se ve:

link rel="preload" href="path-to-roman-subset.woff2" as="font" type="font/woff2" crossorigin

Aquí solo debemos precargar una fuente. Si cargamos más de uno, podemos afectar negativamente al tiempo de carga inicial.

En la lista de estrategias, Zach también mencionó que prefiere usar un URI de datos en lugar de la preloadvariante. Sólo lo prefiere porque el soporte del navegador preloadsolía ser malo. Hoy en día, creo que la compatibilidad con el navegador es lo suficientemente decente como para elegir la precarga en lugar de un URI de datos.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
50 85 No 79 11.1

Móvil/Tableta

androidcromo Android Firefox Androide Safari en iOS
124 125 124 11.3-11.4

Nota final de Zach

Chris publicó este artículo a través de Zach y Zach deseaba haber priorizado un enfoque sin JavaScript en su artículo original.

Creo que el artíc

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir