Pasar a una pila de fuentes del sistema en WordPress (cómo y por qué)

Soy un gran admirador del rendimiento web. Pero tampoco creo que deba o tenga que comprometer el diseño. Siempre hay un buen equilibrio en el medio. En 2017, estaba en el blog de GitHub y buscaba su fuente. Fue muy fácil de leer. Así que busqué en las propiedades con Chrome Devtools y vi que estaban usando una pila de fuentes del sistema .

He estado usando fuentes del sistema durante años y me encantan. Así que hoy, quiero mostrarte cómo usar una pila de fuentes del sistema en tu sitio de WordPress.

¿Qué es una pila de fuentes del sistema?

Hay diferentes tipos de fuentes para elegir para un sitio web. Prácticamente tienes cuatro opciones diferentes:

• Fuentes seguras para la web: gratuitas y sin necesidad de tiempo de descarga por parte del navegador, pero por lo general se ven anticuadas y, por lo tanto, no se usan mucho. A nadie le gusta Arial o Tahoma, ¿verdad? Vea una lista completa de fuentes seguras para la web.
• Fuentes web: lucen hermosas, pero requieren descarga desde el navegador. Tener opciones gratuitas y premium disponibles. Se suma al peso total de la página de su sitio web. Sin embargo, se pueden servir desde CDN en caché. Los proveedores incluyen Google, Adobe Fonts (TypeKit), etc.
• Aloje fuentes web localmente: Hay opciones gratuitas y premium disponibles. Todavía requiere tiempo de descarga y puede aprovechar una sola conexión HTTP/2 en CDN en caché. Todos los principales navegadores ahora tienen particiones de caché separadas, por lo que alojarlos localmente es mejor para el rendimiento. Puede alojar sus fuentes de Google localmente con Perfmatters.
• Fuentes del sistema: gratis, se ven bastante bien ya que coinciden con el sistema operativo, ¡y no requieren tiempo de descarga! Son utilizados por Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (lea la historia de la fuente de su sistema), PubMed e incluso su panel de WordPress. En mi opinión personal, las fuentes del sistema se ven un poco mejor en macOS que en Windows.

Las fuentes del sistema no son nada nuevo. De hecho, Medium los estaba usando en 2015. Se sienten como su sistema operativo porque usan fuentes nativas. Muchos sistemas operativos modernos eligen las fuentes muy sabiamente, y todos tienen una apariencia muy elegante. No es como volver a una fuente segura para la web de Arial o Times New Roman. Confía en mí; nadie quiere ver Times New Roman en un sitio web.

Y lo mejor de todo, las fuentes del sistema funcionan como fuentes seguras para la web, ya que no requieren ningún tiempo de descarga por parte del navegador. Esto puede ayudar a reducir el peso total de la página en su sitio web. En abril de 2022, las fuentes web, en promedio, representan alrededor del 6,07 % del peso total de un sitio web. Si bien esto no es enorme, recuerde que cada pequeña optimización que realice se suma a un sitio web rápido, especialmente en dispositivos móviles.

¿Hay alguna desventaja en el uso de fuentes del sistema? ¡No! Esa es la belleza de esto. Las advertencias en PageSpeed ​​Insights como "Asegúrese de que el texto permanezca visible durante la carga de la fuente" ni siquiera entran en juego, porque técnicamente no se está descargando nada.

Pila de fuentes del sistema CSS

Con la propiedad font-family con fuentes web, normalmente tiene su fuente principal y una o dos fuentes alternativas. Con las fuentes del sistema, debe incluir todos los diferentes sistemas operativos y, por lo tanto, debe apilar bastantes fuentes más. Es por eso que se llama "pila de fuentes del sistema".

Por ejemplo, así es como podría aparecer CSS con una fuente web.

 familia de fuentes: "Open Sans","Helvetica Neue",sans-serif;

Y así es como podría verse una pila de fuentes del sistema. La buena noticia es que no todos se están cargando; es solo un orden de qué fuentes deben cargarse desde el sistema operativo si están disponibles.

 familia de fuentes: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

¿Sabía que su tablero de WordPress usa una pila de fuentes del sistema? Esto es lo que están usando.

 familia de fuentes: -sistema Apple,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks también tiene un método alternativo sobre cómo aplicar fuentes del sistema usando @font-face.

Hoja de trucos de la pila de fuentes del sistema

Aquí es donde tienes que elegir qué configuración quieres. Aquí hay una lista de las fuentes que van con cada sistema operativo. Nota: Esto cambia con el tiempo, por lo que es posible que deba revisar sus fuentes a medida que surgen nuevos sistemas operativos. Me aseguraré de mantener esta lista actualizada.

Cómo implementar una pila de fuentes del sistema

Uso una pila de fuentes del sistema aquí en woorkup.com y en todos mis otros sitios web. Siento que finalmente he encontrado lo mejor de ambos mundos. Y así es como lo hice.

Opción 1: Usa el tema de WordPress de GeneratePress

¿Quieres hacer esto súper fácil? Simplemente muévase al tema GeneratePress, que es lo que uso en todos mis sitios web. En el personalizador, en Tipografía, simplemente puede seleccionar "Pila del sistema". ¡Y eso es!

Otros temas centrados en el rendimiento como Astra también tienen la opción de usar fuentes del sistema.

Opción 2: Agregar pila de fuentes del sistema con CSS

Si está utilizando otro tema de WordPress, puede pasar fácilmente a una pila de fuentes del sistema con un poco de CSS.

Paso 1

En WordPress, deberá cambiar el CSS en su font-family . Puede usar el personalizador de WordPress para agregar el código, en "CSS adicional".

Paso 2

Introduce el siguiente código. Esto puede variar según el tema, pero para la mayoría, lo siguiente debería anular todo. Estoy usando la misma pila de fuentes del sistema que GithHub, excepto que estoy agregando system-ui ya que las versiones más nuevas de Chrome lo admiten. Recuerde, se utilizarán en el orden en que aparecen en la pila.

 body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {familia de fuentes:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji ", "Símbolo de interfaz de usuario de Segoe";}

Dependiendo de su tema, es posible que deba agregar etiquetas de párrafo para el contenido del cuerpo. Entonces seria esto:

 body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Paso 3

También querrá deshabilitar cualquier fuente de terceros, como Google Fonts, que haya cargado desde su tema de WordPress. Esto nuevamente puede variar, ya que cada desarrollador incluye fuentes de manera diferente. Pero muchos temas ahora tienen una manera fácil de activar o desactivar Google Fonts.

Si usa uno de los temas predeterminados de WordPress, puede usar fácilmente el complemento gratuito Deshabilitar fuentes de Google. O también puede deshabilitar las fuentes de Google en nuestro complemento Perfmatters.

Antes y después de las pruebas de velocidad

Y, por supuesto, no me pude resistir. Aquí hay pruebas de velocidad antes y después. Cada prueba se ejecutó cinco veces y se tomó un promedio.

Prueba de velocidad antes

Aquí está la prueba de velocidad anterior, cuando tenía las fuentes de Google cargando.

Prueba de velocidad después

Aquí está la prueba de velocidad después de usar la pila de fuentes de mi sistema. Como puede ver, reduje el peso total de mi página en aproximadamente 60 KB y me deshice de tres solicitudes. Uno a fonts.googleapis.com y luego dos descargas para versiones de Roboto de diferente peso de fuente. La pila de fuentes del sistema fue aproximadamente un 6 % más rápida que las fuentes de Google .

Conozco muchos sitios que usan 4 o 5 pesos o estilos de fuente diferentes y, a veces, incluso 2 o 3 fuentes de Google diferentes. Entonces, potencialmente podría ver mejoras aún más significativas que incluso yo.

También moví nuestro sitio de WordPress novashare.io a las fuentes del sistema y obtuve excelentes resultados; echa un vistazo a esta prueba de velocidad a continuación.

Suavizado de fuentes

El suavizado de fuentes se reduce a preferencias personales. Cuando aplique antialiasing, su fuente será un poco más delgada y clara. No lo estoy usando en este sitio porque prefiero la fuente un poco más gruesa; Creo que se siente un poco más cálido. Pero puedes experimentar con ambos para ver cuál te gusta.

Puedes agregar esto al cuerpo.

 cuerpo {
-webkit-font-smoothing: suavizado;
-moz-osx-font-smoothing: escala de grises;
}

Resumen

Las fuentes del sistema pueden ser una excelente alternativa a las fuentes web y las fuentes seguras para la web. Todavía me gusta mucho el aspecto de mi fuente, y ahora sé que no genera ninguna carga para los usuarios. Aunque las fuentes de Google se pueden alojar localmente, siguen siendo parte del peso total de la página.

¿Tienes curiosidad por saber cuáles son tus pensamientos? ¿Ya has usado una pila de fuentes del sistema con WordPress? Si es así, házmelo saber a continuación.