Las tipografías (fonts)

Cuando una persona usuaria visita un sitio web, a menudo el navegador descarga las tipografías, o fuentes, que se han definido por diseño a través del comando @font-face, una manera de cargar un archivo de tipografía digital en el servidor o en nuestro ordenador y, a continuación, hacer referencia a este tipo de letra mediante la orden font-family en el archivo de estilo CSS. Actualmente se suelen utilizar las fuentes web porque permiten una mayor personalización del diseño. Pero esta personalización afecta al rendimiento, a menudo añadiendo varios segundos de tiempo de carga a una página.

Desventajas:

  • Como se han de descargar al menos en la primera visita al lugar, su uso aumenta el tiempo de carga de la página y la cantidad de bytes transferidos.
  • Este problema (aumento del tiempo de carga y cantidad de bytes transferidos) aumenta con cada tipo de letra web utilizado.
  • Dependiendo de cómo se utilicen y de la velocidad de la red, durante el tiempo hasta que el tipo de letra escogido se muestre puede que se visualice una tipografía por defecto o bien el texto se haga invisible hasta entonces. Ambas cosas visualmente desagradables.
  • También existe el riesgo de que el uso de fuentes web de servicios externos choque con normativas de privacidad como el GDPR europeo.
  • La gran mayoría de webs tiran de google web fonts, así que estaríamos beneficiando, de nuevo, a los de siempre, y perjudicando precisamente a la comunidad de gente interesada en nuestra actividad, dado que estamos regalando a google datos sobre sus hábitos.
  • Aunque normalmente se cargan sólo en la primera visita del sitio web y se guardan en la memoria caché del navegador para la sesión, pueden representar una gran cantidad de bytes transferidos.

Consejos si utilizáis editores tipo Wordpress u otros del mismo tipo:

  • Elegid un tema que utilice pocos o ningún tipo de letra web. Es posible que tengáis que pedir al autor del tema información al respecto.
  • Si os encariñáis con un tema que usa web fonts, pedidle a un/a desarrollador/a que desactive el uso de fuentes web para dicho tema.
  • Pedidle a la persona que os diseña el tema/web que utilice fuentes predeterminadas o, al menos, las mínimas fuentes web posible.
  • Utilizad la opción "Desactivar las fuentes web" del plugin de WordPress de GreenerWP para desactivarlas en vuestro tema (si éste lo admite).

Fuentes predeterminadas

Con tipografías personalizadas en toda la web, a menudo es fácil pasar por alto que incluso antes de que el CSS del sitio web actúe, la hoja de estilo "user-agent" o la configuración del navegador aplican ya estilos en el sitio web. Una de las primeras cosas que aprende una persona diseñadora de front-end es que todo el estilo específico del sitio web que vemos simplemente sustituye estos valores predeterminados del navegador. Y esto significa carga y tráfico innecesarios.

En The low tech magazine nos intentan convencer de que volvamos a utilizar las tipografías por defecto: se trata de aprovechar estos valores predeterminados, puesto que no sólo evita tener que cargar más recursos, sino que también reclama el papel del navegador, y por tanto de la persona usuaria, en el acceso a los sitios web.