Carga de fuentes web con el cargador de fuentes web | Programar Plus

0

Hace varios años, el consenso sobre la carga de fuentes en la comunidad era que, a medida que se carga un sitio web, todas las fuentes deben estar ocultas hasta que se hayan descargado los recursos correctos. Muchos diseñadores y desarrolladores argumentaron que el método de carga de fuentes predeterminado llamado “Flash de texto sin estilo”, o FOUT, era una molestia para los usuarios. Esto es cuando la fuente web alternativa, digamos Georgia, se muestra primero en la pantalla y luego se reemplaza por una fuente personalizada cuando se carga. Argumentaron que sería una experiencia de navegación más cohesiva si los usuarios simplemente esperaran a que se descargara todo en lugar de experimentar este flash de un tipo de letra a otro.

Pero hoy este no es el caso.

De hecho, esta práctica de permitir que un navegador oculte todo el texto que debería tener un estilo con una fuente personalizada ahora se llama ‘Flash of Invisible Text’, o FOIT, y a menudo se considera la peor de todas las opciones posibles. Scott Jehl ha argumentado que esta es una idea bastante mala tanto para el rendimiento como para la usabilidad:

El FOIT tiende a ser más problemático en navegadores como iOS Safari, que oculta el texto hasta 30 segundos antes de renunciar y renderizarlo con una fuente predeterminada, pero también se puede ver en navegadores con duraciones de ocultación más cortas como Chrome, Firefox y Opera también.

Del mismo modo, la página de ayuda de Typekit sobre el tema establece que “el enfoque FOUT permite páginas utilizables de forma más inmediata, especialmente en conexiones de red más lentas”. Entonces, como diseñadores y desarrolladores, tenemos que tomar una decisión entre FOUT o FOIT.

Destello de texto invisible

  1. La fuente comienza a descargarse
  2. El texto es invisible mientras se solicita la fuente web
  3. El tiempo pasa muy lento
  4. Cargas de fuentes web
  5. Aparece el texto con la fuente web

Destello de texto sin estilo

  1. La fuente comienza a descargarse
  2. Mostrar texto inmediatamente con font-family retroceder
  3. Cargas de fuentes web
  4. El texto con fuente alternativa se reemplaza por la fuente web

La diferencia entre estos dos enfoques suele ser sorprendente. Scott menciona que el enfoque FOIT hizo que el texto en el sitio web de Filament Group fuera visible en 2.7s en una conexión 3G, mientras que el enfoque FOUT hizo que el texto fuera visible en 0.6s. Si queremos que nuestras interfaces se sientan lo más rápido posible, entonces necesitamos usar el método FOUT; La experiencia del usuario y el rendimiento de la red es definitivamente la principal prioridad de esta técnica.

Problemas con el enfoque FOUT

Este enfoque ciertamente tiene varias desventajas. Por ejemplo, cuando se produce el cambio entre la fuente alternativa y la elegante, puede haber una gran cantidad de vibraciones y alteraciones debido a las diferencias en el peso de la fuente y la altura x. En consecuencia, es posible que una empresa solo desee comunicarse en un determinado tipo de letra por razones de marca, pero con esta técnica de FOUT eso es obviamente imposible.

A veces, estas desventajas se pueden mitigar. Eche un vistazo, por ejemplo, al sitio web de Bram Stein, donde el ligero destello de texto sin estilo es instantáneo y el formato de la página permanece casi exactamente igual antes y después de que se haya completado la carga. Además, si queremos usar un tipo de letra de visualización en el que no podemos encontrar una fuente alternativa adecuada, quizás podamos usar SVG para mostrar ese texto.

Caminando por la técnica FOUT

Últimamente he estado experimentando con Web Font Loader, que les da a los desarrolladores un poco más de control sobre cómo se tratan las fuentes en FOUT. Primero, necesitamos incrustar el código del cargador de fuentes web en nuestro marcado:

(function(d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js";
  s.parentNode.insertBefore(wf, s);
})(document);

Esto carga de forma asincrónica el script en la página, por lo que puede agregarlo justo antes del body termina, o en el head y el resto de los recursos no se bloquearán. Esta técnica es útil para el soporte de IE9, pero si eso no es importante para nuestro proyecto, podemos usar este método en su lugar:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

Una vez que tenemos el script, podemos agregar nuestras fuentes. En este proyecto paralelo, estaba experimentando con fuentes que se sirven con @font-face de la fundición de Typonine que añadimos como un link en el head de nuestro marcado:

<link rel="preconnect" href="https://fonts.typonine.com/" crossorigin>

preconnect es útil aquí porque nos hará automáticamente el apretón de manos de la red; antes de solicitar las fuentes de nuestro script, ya tenemos toda la información que el navegador necesita para obtener esos recursos, lo que hará que el proceso sea un poco más rápido. (Gracias a Ilya Grigorik por sugerir que usemos el crossorigin atributo aquí también.)

Ahora podemos comenzar a verificar si estas fuentes se han cargado en nuestra página usando el WebFontConfig objeto:

WebFontConfig = {
  custom: {
    families: [
      'Nocturno Display Medium 3',
      'Nocturno Book 2',
      'Nocturno Regular Italic 24',
      'Nocturno Regular 26',
      'Nocturno Regular 25'
    ],
    urls: [
      'https://fonts.typonine.com/WF-000000-001254.css',
      'https://fonts.typonine.com/WF-000000-001255.css'
    ]
  },
  timeout: 2000
};

El custom El objeto le permite al Web Font Loader saber que queremos cargar fuentes desde una hoja de estilo externa, pero con este cargador podemos usar fuentes de Typekit, Google, Fontdeck o Fonts.com si queremos. Con el families array estamos identificando todos los nombres de familias de fuentes que de otro modo usaríamos directamente en el CSS.

Puede notar que he establecido un timeout de 2 segundos. Esa es una cifra completamente subjetiva, pero creo que es tiempo de sobra para hacer una solicitud a la red, más tiempo y el usuario probablemente tenga una mala conexión y todo lo que quiere es el contenido de todos modos.

Una vez que el cargador haya terminado de cargar esas fuentes, agregará estas clases a la html elemento:

<html class="wf-nocturnoregularitalic24-n4-active wf-nocturnoregular26-n4-active wf-nocturnoregular25-n4-active wf-nocturnodisplaymedium3-n4-active wf-nocturnobook2-n4-active wf-active">
   <!-- markup for the website goes here -->
</html>

Estas clases son los ganchos que necesitamos para diseñar la página dependiendo de si las fuentes se han cargado o no. Sin embargo, hay más clases que se pueden agregar para ayudarnos:

  • loading: se activa cuando se han solicitado todas las fuentes.
  • active: se activa cuando las fuentes se han renderizado.
  • inactive: se activa cuando el navegador no admite fuentes vinculadas o si no se pudo cargar ninguna de las fuentes.
  • fontloading: se activa una vez por cada fuente que se carga.
  • fontactive: se activa una vez para cada fuente que se procesa.
  • fontinactive: se activa si la fuente no se puede cargar.

En nuestra hoja de estilo, ahora podemos configurar la familia adecuada con el .wf-active clase:

$fallback: Georgia, serif;

h1, .h1 {
  font-family: $fallback;

  .wf-active & {
    font-family: "Nocturno Display Medium 3";
  }
}

Así que ahora nuestros usuarios verán inmediatamente las fuentes contenidas en el $fallback variable pero una vez que nuestro .wf-active El cargador de fuentes web agrega la clase, luego esas fuentes se cambiarán por la fuente web elegante. Ahora estamos adoptando un enfoque de mejora progresiva para la carga de fuentes.

Evitando el jank

Un problema que noté fue que una vez que estas fuentes se habían cargado, la cantidad de palabras que cabían en una línea cambiaba y ciertos elementos eran demasiado anchos o demasiado pequeños debido a estas nuevas adiciones a la página.

Para solucionar este problema, siempre podemos establecer una font-size y line-height combinación para hacer de esta una experiencia más fluida:

h1, .h1 {
  font-size: 30px;
  line-height: 35px;
  font-family: Georgia, serif;

  .wf-active & {
    font-size: 26px;
    line-height: 30px;
    font-family: "Nocturno Display Medium 3";
  }
}

Minimizar el destello del texto sin estilo

Después de la carga de la primera página, The Filament Group recomienda configurar una cookie para que no tengamos ese destello de texto sin estilo mientras el .wf-active La clase se aplica al marcado cada vez. Pero en mi experimento, solo estaba usando un marcado simple y estático, por lo que la opción de cookies no estaba realmente disponible. En su lugar, utilicé uno de los muchos eventos disponibles en Web Font Loader para actualizar sessionStorage, como esto:

WebFontConfig = {
  // other options and settings
  active: function() {
    sessionStorage.fonts = true;
  }
}

No olvide echar un vistazo a la lista completa de eventos disponibles. Pero con este evento en particular podemos verificar inmediatamente en el encabezado del documento si esa clave existe en el sessionStorage y, si lo hace, podemos agregar el nombre de la clase al html elemento lo más rápido posible:

<head>
  <script>
    (function() {
      if (sessionStorage.fonts) {
        console.log("Fonts installed.");
        document.documentElement.classList.add('wf-active');
      } else {
        console.log("No fonts installed.");
      }
    })();
  </script>
</head>

Esto no bloquea por completo el destello del texto sin estilo, que probablemente será un problema de cualquier manera, pero ciertamente es una mejora en FOIT.

La carga de fuentes es crucial para una buena tipografía

Después de jugar con esta técnica, descubrí que la experiencia cambió por completo mi punto de vista sobre que buena tipografía en la web.

Pero si tiene alguna idea sobre cómo mejorar el método que se muestra arriba, háganoslo saber en los comentarios.