Evita el destello de texto invisible

Katie Hempenius
Katie Hempenius
X

En este codelab, se muestra cómo mostrar texto de inmediato con Font Face Observer.

Agrega un observador de caras de fuente

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 es necesario que lo agregues por separado. Sin embargo, debes agregar una etiqueta de secuencia de comandos para ello.

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

Usa Font Face Observer

Crea observadores

Crea un observador para cada familia de fuentes que se use 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 no sabes qué observadores 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ías FontFaceObserver('Times New Roman'). Times y Serif son fuentes de resguardo, por lo que no es necesario declarar FontFaceObservers para ellas.

Cómo detectar la carga de fuentes

El código para detectar una carga de fuente se ve así:

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 a que se carguen ambas fuentes.

  • 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

Tu secuencia de comandos ahora 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");

Esto agrega la clase fonts-loaded al elemento raíz del documento (la etiqueta <html>) una vez que se hayan cargado 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>

Actualiza el CSS

Tu página debe tener un diseño para usar una fuente del sistema inicialmente 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, significa que implementaste correctamente el observador de fuentes y te deshiciste del "flash de texto invisible".

Un encabezado en una fuente cursiva.