Evita el destello de texto invisible

Katie Hempenius
Katie Hempenius
X

En este codelab, aprenderás a mostrar texto de inmediato usando Font FaceObserver.

Cómo agregar Font Face Observer

Font Face Observer es una secuencia de comandos que detecta cuándo se carga una fuente. El archivo fontfaceobserver.js ya se guardó en el directorio del proyecto, por lo que no necesitas agregarlo por separado. Sin embargo, sí debes agregarle una etiqueta de secuencia de comandos.

  • Haz clic en Remix to Edit para que el proyecto sea editable.
  • Agrega una etiqueta de secuencia de comandos para fontfaceobserver.js en index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Cómo usar Font Face Observer

Crear observadores

Crea un observador para cada familia de fuentes que se usa en la página.

  • Agrega la siguiente secuencia de comandos después de la secuencia de comandos fontfaceobserver.js. Esto crea observadores para las familias de fuentes “Pacifico” y “Roboto”:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Si en algún momento no sabes bien qué observadores de facetas de fuente debes crear, busca las declaraciones font-family en tu CSS. Pasa el nombre font-family de estas declaraciones a FontFaceObserver(). No es necesario crear un observador de fuentes para las fuentes de resguardo.

Por ejemplo, supongamos que tu CSS tiene las siguientes características:

font-family: "Times New Roman", Times, serif;

agregarás FontFaceObserver('Times New Roman'). Los Times y serif son fuentes de resguardo, por lo que no necesitas declarar FontFaceObservers para ellos.

Detecta la carga de la fuente

El código para detectar una carga de fuente tiene el siguiente aspecto:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() es una promesa que se resuelve cuando se carga la fuente.

El sitio de demostración usa dos fuentes diferentes, por lo que debes usar Promise.all() para esperar hasta que se hayan cargado ambas.

  • Agrega esta promesa a tu secuencia de comandos, justo debajo de los FontFaceObservers que acabas de declarar:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Registro

La secuencia de comandos debería verse de la siguiente manera:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

Aplicar la clase fonts-loaded

  • Reemplaza el comentario /* Do things */ en la secuencia de comandos por esta línea:
document.documentElement.classList.add("fonts-loaded");

De esta manera, se agrega la clase fonts-loaded al elemento raíz del documento (la etiqueta <html>) una vez que se cargan ambas fuentes.

✔️Registro

La secuencia de comandos completada debería verse de la siguiente manera:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

Actualizar CSS

Se debe diseñar tu página para que, al principio, use una fuente del sistema y fuentes personalizadas una vez que se haya aplicado la clase fonts-loaded.

  • Actualiza el CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Verificar

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

Si la página se ve de esta manera, quiere decir que implementaste correctamente Font Face Observaer y te deshaces del "Flash of Invisible Text".

Un encabezado en una fuente cursiva.