Fuentes del sistema CSS

Cómo usar las fuentes del sistema en CSS para mejorar su sitio y brindar una mejor experiencia a sus usuarios en términos de velocidad y tiempo de carga de la página

Un poquito de historia

Paraaños, los sitios web solo pueden usar fuentes disponibles en todas las computadoras, como Georgia, Verdana, Arial, Helvetica, Times New Roman. No se garantiza que otras fuentes funcionen en todos los sitios web.

Si querías usar una fuente elegante, tenías que usar imágenes.

En 2008, Safari y Firefox introdujeron el@font-faceLa propiedad CSS y los servicios en línea comenzaron a proporcionar licencias a las fuentes web. El primero fue Typekit en 2009, y luego Google Fonts se hizo muy popular gracias a su oferta gratuita.

@font-facese implementó en todos los principales navegadores, y hoy en día es un hecho en todos los dispositivos razonablemente recientes. Si eres un desarrollador web joven, es posible que no te des cuenta, pero en 2012 todavía teníamos artículos que explicaban esta nueva tecnología de fuentes web.

Hoy dia

latause cualquier fuente que desee usar, confiando en un servicio como Google Fonts, o proporcionando su propia fuente para descargar.

lata, perodeberías?

Si tiene la opción (y con esto quiero decir, no está implementando un diseño que le dio un cliente), es posible que desee pensar en ello, en un movimiento para volver a lo básico (¡pero con estilo!)

El impacto de las fuentes web

Todo lo que carga en sus páginas tiene uncosto. Este costo es especialmente impactante en dispositivos móviles, donde cada byte que necesita tiene un impacto en el tiempo de carga y la cantidad de ancho de banda que hace que sus usuarios consuman.

La fuente debe cargarse antes de que se procese el contenido, por lo que debeEsperepara que la carga de ese recurso se complete antes de que el usuario pueda leer incluso una sola palabra que usted escribió.

Pero las fuentes web son una forma de proporcionar unaincreíble experiencia de usuarioa través de una buena tipografía.

Ingrese las fuentes del sistema

Los sistemas operativos tienen excelentes fuentes predeterminadas.

Las fuentes del sistema ofrecen la gran ventaja develocidadyrendimientoy unreducción del tamaño de su página web.

Pero como efecto secundario, hacen que su sitio web se veamuy familiara cualquiera que lo mire, porque están acostumbrados a ver la misma fuente todos los días en su computadora o dispositivo móvil.

Es efectivamente unfuente nativa.

Y como es la fuente del sistema, esgarantizado para verse genial.

Es posible que conozca uno de estos, como ejemplo:

  • GitHub
  • Medio
  • Fantasma
  • Oreja
  • Booking.com

... han estado usando System Fonts durante años.

Incluso el tablero de Wordpress, que ejecuta millones de sitios web, usa fuentes del sistema, y Medium, que se trata de lectura, decidió usar fuentes del sistema.

Si funciona para ellos, es probable que también funcione para usted.

Estoy vendido. Dame el codigo

Esta es la línea CSS que debe agregar a su sitio web:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

El navegador interpretará todos estos nombres de fuentes y, a partir del primero, comprobará si están disponibles.

Safari y Firefox en macOS "interceptan"-apple-system, lo que significa la fuente San Francisco en las versiones más recientes, Helvetica Neue y Lucida Grande en las versiones anteriores.

Chrome funciona con BlinkMacSystemFont, que tiene como valor predeterminado la fuente del sistema operativo (nuevamente, San Francisco en macOS).

Segoe UI se utiliza en sistemas Windows modernos y Windows Phone, Tahoma en Windows XP, Roboto en Android, etc., para otras plataformas.

Arial y sans-serif son las fuentes alternativas.

Si utilizaEmojisen su sitio, asegúrese de cargar también las fuentes de símbolos:

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

Es posible que desee cambiar el orden de aparición de la fuente en función de las estadísticas de uso de su sitio web.

Una nota sobresystem-ui

Tal vez veassystem-uimencionado en las publicaciones de System Fonts en línea, pero en este momento se sabe que causa problemas en Windows (consultehttps://infinnie.github.io/blog/2017/systemui.htmlyhttps://github.com/twbs/bootstrap/pull/22377)

Se está trabajando para estandarizar system-ui como una familia de fuentes genéricas, por lo que en el futuro solo escribirás

body {
  font-family: system-ui;
}

Verhttps://www.chromestatus.com/feature/5640395337760768yhttps://caniuse.com/#feat=font-family-system-uipara vigilar el progreso. Chrome, Safari ya lo admiten, Firefox parcialmente, mientras que Edge aún no lo implementa.

Use variaciones de fuente creando reglas @ font-face

El enfoque descrito anteriormente funcionaestupendohasta que necesite modificar la fuente en un segundo elemento, y tal vez incluso en más de uno.

Tal vez desee especificar la cursiva comofontpropiedad en lugar de enfont-styleo establezca un peso de fuente específico.

Este bonito proyecto de Jonathan Nealhttps://jonathantneal.github.io/system-font-css/le permite utilizar las fuentes del sistema mediante la importación de un módulo, y puede configurar

body {
  font-family: system-ui;
}

Estasystem-uise define enhttps://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css.

Ahora puede usar diferentes variaciones de fuente haciendo referencia a:

.special-text {
  font: italic 300 system-ui;
}

p { font: 400 system-ui; }

Leer más

Descarga mi gratisManual de CSS


Más tutoriales de CSS: