Fuentes del sistema : Optimice su sitio web con ellos

Las fuentes del sistema dan un estilo característico a nuestro sitio web y, por lo general, los diseñadores utilizan fuentes especiales para ilustrar los diseños o, en algunos casos, nuestros clientes tienen sus fuentes corporativas, como marca registrada de su imagen de marca. El problema es que esto no suele garantizar una buena optimización en su sitio web, debido al peso de la carga de ciertas fuentes.

Es importante tener en cuenta que un buen Servidor Web o un CDN pueden y van a ayudar mucho en este proceso de carga, así como, a desarrollar correctamente las tareas de SEO.

Últimamente se utilizan mucho las fuentes de google disponibles en Google Fonts. Se trata de un extenso catálogo de fuentes donde podemos elegir familias, tipos, etc. y utilizarlas gratuitamente en nuestra web.

El uso de fuentes distintivas en el diseño suele parecer una muy buena idea, pero a veces cunde el pánico cuando pones la URL de tu sitio web en la herramienta Google PageSpeed Insights y recibes la alerta:

Eliminar el JavaScript que bloquea la visualización.

Conclusión: Su fuente aparece bloqueando la visualización del contenido en la mitad superior de la página. Y es entonces cuando te preguntas: ¿cómo puedo arreglar esto? La respuesta puede ser de dos maneras:

Tómelo como un imperativo en el diseño de su sitio;
O bien, utilizar alguna estrategia de carga de fuentes para colaborar con la optimización del sitio.
Esto último pasa por el filtro de PageSpeed Insights, pero encontrarás un FOUT, que en este caso es un pequeño efecto “flash” de milisegundos (en mi opinión horrible lolrsrs), en él notaremos que en el primer momento tu sitio tiene una fuente y cuando carga, el script entra en acción y la cambia por la fuente de diseño.

Resumiendo: Si no te gusta el efecto, confórmate con que la carga se vea comprometida, pero si quieres mejorar la velocidad de carga y que el diseño quede en segundo plano, utiliza fuentes del sistema o un script de carga.

Fuentes del sistema

En esta tabla presento algunas fuentes del sistema.

Sabemos que no son tan bonitos, pero son prácticos. Para utilizarlos, añada el siguiente código a su CSS.

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif, "Apple Color Emoji";
}

Script para cargar google fonts

Usted o su estilo de tema inserta las fuentes de Google de la siguiente manera:
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
 
Asociar la fuente a los elementos del HTML:
 
.css-selector {
    font-family: 'Open Sans
}

Vea cómo utilizar el scripting para mejorar la optimización del sitio

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      familias: ['Open Sans', 'Titillium Web']
    }
  });
</script>

Pon en lugar de Open Sans y Titillium Web los nombres de las familias de fuentes que has seleccionado, separadas por comas y superarás este filtro en PageSpeed.