¿Sabías que puedes usar fuentes locales para aumentar la velocidad de tu WEB? ¿Te gustaría tener tipografías de uso comercial en tu WEB?, Las fuentes de letras, son un elemento importante en tu sitio WEB, debido a que son necesarias para transmitir tus mensajes escritos.
En la actualidad puedes encontrar infinidad de fuentes de uso comercial gratis o por las que debes pagar una licencia de uso, con las que puedes darle un toque de personalización a tu marca y a tus mensajes.
Sin importar el tipo de fuente tipográfica que tú elijas, puedes usar fuentes locales en WordPress o HTML aplicando una serie de estrategias que te ayudaran a mejorar el rendimiento de tu sitio WEB.
Esto es con el objetivo de que puedas lograr un equilibrio entre lo funcional y lo estético para que tus contenidos se puedan ubicar en los primeros puestos de los buscadores.
¿Qué encontrarás en este artículo?
¿Qué es una fuente tipográfica?
Una fuente tipográfica es simplemente el estilo o diseño de las letras y caracteres que se utilizan en textos escritos. Es como la personalidad de las letras que ves en un libro, sitio WEB o cualquier otro lugar donde se muestre texto.
Dependiendo del tono y personalidad de la marca, puedes ver diferentes tipos de fuentes tipográficas y con una amplia variedad de estilos y tamaños, que personalizan los mensajes que desean transmitir.
Un ejemplo de estos lo puedes ver en las letras en diferentes tipos de libros, además del uso de una fuente con letras grandes y audaces para títulos llamativos, mientras que para el texto principal, pueden optar por una fuente más legible y estilizada.
En el mundo digital, las fuentes tipográficas son un archivo digital que contienen las letras y caracteres que utilizas para darle un aspecto único y atractivo a los sitios WEB, logotipos, anuncios y más.
¿Por qué usar fuentes locales en una WEB?
Utilizar una familia tipográfica de forma local en tu servidor de hosting, te permite ofrecer una mejor experiencia de usuario gracias a que proporciona una serie de beneficios, entre los que están:
Mejora la velocidad
Usar fuentes locales reduce la cantidad de solicitudes externas, así tu sitio WEB se cargará más rápido, lo que mejora la experiencia del usuario y puede mejorar tu clasificación en los motores de búsqueda como Google.
Mayor control
Al usar fuentes de letras online dependes de servicios externos, por eso cuando alojas en tu servidor de hosting la familia tipográfica que utiliza tu WEB podrás personalizarla, modificarla o actualizarla según las necesidades de tu negocio, gracias a que tendrás un control completo.
Máxima disponibilidad
Al usar las fuentes locales en tu servidor de hosting no tienes que preocuparte de la disponibilidad de la familia tipográfica que usa tu WEB, ya que no dependerá de la comunicación con algún servicio externo como el de Google Fonts.
Privacidad y seguridad
Al usar fuentes online como las de Google Fonts necesitaras compartir datos de navegación con servicios externos, así que cuando guardar las fuentes en tu servidor de hosting mejoras la privacidad y seguridad de los usuarios.
¿Cómo usar fuentes locales en una WEB?
Si quieres usar fuentes locales en tu WEB, lo primero que debes hacer es colocar el archivo .woff2 en tu servidor de hosting y después llamarlas desde tu WEB, para ello debes seguir cada uno de los siguientes pasos:
Obtener el archivo de la fuente
Si es de Google Fonts o tienes el archivo woff2
Lo primero que debes hacer para usar fuentes locales en tu WEB es obtener el archivo. woff2 de la familia tipográfica que quieres utilizar, por ejemplo si vas a instalar una fuente de Google Fonts, puedes buscar y descargar las tipografías de Google de la herramienta Google Webfonts Helper.
Aquí solo debes buscar y seleccionar la fuente que desees, en este caso a modo de ejemplo usaremos una de las fuentes de Google “Roboto”, lo siguiente que debes hacer es “Seleccionar juegos de caracteres”, posteriormente “Seleccionar el estilo” y por último descargar el archivo de la tipografía de Google.
Mi recomendación como consultor WPO en WordPress, es que en la sesión “Seleccionar juegos de caracteres” no elijas ninguna opción y selecciones un solo estilo de fuente, para que puedas usar fuentes locales sin agregar mucho peso.
Si no es de Google Fonts o no tienes el archivo woff2
En el caso de que quieras usar una fuente propia en tu WEB que no sean fuentes de Google o que no tengas el archivo. woff2, puedes convertir el archivo .ttf u .otf de la familia tipográfica que desees en woff2 con la herramienta en línea Webfont Generator.
Para ello solo debes subir en la herramienta el archivo a convertir y una vez que se cargue, comenzara a convertirse de forma automática, una vez terminado el proceso aparecerá el botón “Download Your KIT” para que puedas descargarla.
Subir la fuente al servidor de hosting
Una vez tengas el archivo .woff2 de la fuente que deseas utilizar, lo siguiente es subirla a tu servidor de hosting para usar fuentes locales en tu WEB, puedes hacerlo mediante aplicación de FTP como FileZilla o directamente desde el administrador de archivos de tu servidor de hosting.
Basado en mi experiencia como consultor WordPress, lo más recomendable es que crees una carpeta especial para guardar la familia tipográfica que vas a utilizar, por ejemplo en WordPress lo puedes hacer en la carpeta wp-content/uploads/ y allí creas un directorio llamado fonts.
Cargar las fuentes en tu WEB
Una vez tengas la fuente en tu servidor de hosting el último paso es cargándolas desde tu WEB, para ello tendrás que agregar la llamada en tu hoja de estilo para que puedas usar fuentes locales cada vez que muestres un contenido.
Si utilizas la aplicación Google Webfonts Helper solo tendrás que copiar la sección que aparece en el paso número 3 “Copy CSS” modificando la ruta para que apunte hacia donde tienes el archivo de la familia tipográfica en tu servidor.
En el caso de que no, solo tendrás que adaptar el siguiente código para que puedas usar fuentes locales en tu WEB.
/* roboto-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}Al seguir todos estos pasos podrás usar la fuente descargada en CSS, lo que permite que tus contenidos se carguen más rápido, ya que no tendrán que estar buscando las tipografías en otro lugar.
¿Cómo usar fuentes locales en GeneratePress?
A diferencia de otras plantillas como Astra que tiene un apartado para usar fuentes locales directamente desde su panel de personalización, en GeneratePress debes realizar una serie de pasos para instalar localmente una familia tipográfica.
Vamos a partir de la suposición de que ya has creado la carpeta correspondiente dentro del directorio de WordPress en el hosting y que has subido por FTP el archivo .woff2 de la fuente que deseas utilizar de forma local.
Una vez realizado estos pasos previos, lo primero que debes hacer para utilizar fuentes locales en GeneratePress, es ir a la opción Apariencia ► Personalizar de tu administrador de WordPress para abrir la sección de personalización de la plantilla.
Una vez se abra la pantalla para personalizar tu instalación de GeneratePress, lo siguiente que debes hacer para poder usar fuentes locales, es buscar la opción de “CSS Adicional” que la última que encontraras en el menú de la izquierda.
Cuando le des a esa opción se abrirá un apartado donde puedes agregar estilos adicionales a GeneratePress, sin tener que alterar el código de la plantilla y que no se perderá cuando realices una próxima actualización de la plantilla.
Una vez aquí tienes que copiar el siguiente código, cambiando la dirección donde se encuentra tu archivo de la familia tipográfica, además de los demás datos correspondientes a la fuente seleccionada.
/* roboto */
@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(/wp-content/uploads/fonts/roboto.woff2') format('woff2');
}Este código de ejemplo es para usar la fuente de Google Roboto, con un estilo normal y un peso de 400, sin embargo, puedes aplicarlo a cualquier tipo de fuente que tú quieras usar localmente, sea de Google o no.
Una vez pegues el código con las modificaciones necesarias, lo siguiente que debes hacer es presionar el botón de “Publicar” que se encuentra en la parte superior, para que los cambios tengan efectos y puedas usar fuentes locales en GeneratePress.
Ya con esto tu WEB estará utilizando las fuentes de forma local, sin embargo, como solo está aplicado a los estilos que utilizan la parte que ven los clientes cuando ven tus contenidos, lo que se conoce como el front end.
Si revisas la parte del administrador de WordPress, verás que no se han aplicado los cambios porque el editor de bloques no utiliza estos estilos, por ello tendrás que hacer un paso adicional para usar fuentes locales en el editor de bloques de WordPress.
¿Cómo usar fuentes locales en Gutenberg?
Para usar fuentes locales en Gutenberg es necesario añadir una función en código PHP para forzar las fuentes que utiliza por defecto y utilice la familia tipográfica que tienes alojadas en tu servidor de hosting, el código que debes agregar si seguiste el paso anterior es:
add_filter( 'block_editor_settings_all', function( $editor_settings ) { $css = wp_get_custom_css_post()->post_content; $editor_settings['styles'][] = array( 'css' => $css ); return $editor_settings; } );¿Dónde instalar el código para usar fuentes locales en el editor de bloques de WordPress?
Para insertar el código para usar fuentes locales tienes 3 formas de hacerlo, la primera es editando el archivo functions.php de tu instalación de WordPress, el inconveniente es que cada vez que actualices tendrás que recordarte de volverlo a poner.
La segunda es si estás utilizando un tema hijo, es colocar el código PHP para usar fuentes locales en el archivo functions.php del tema hijo, aquí no tendrás inconvenientes con las actualizaciones.
Sin embargo, como consultor WPO en WordPress, evito utilizar ambos casos, ya que al tocar archivos de WordPress se pueden cometer errores que causen fallos de visualización o de rendimiento en tu WEB.
Lo que mejor me ha dado resultado es implementar este código en un plugin personalizado, así puedes usar fuentes locales en el editor de bloques de WordPress, sin tener que tocar los archivos de tu instalación de WordPress.
Así, no tienes que preocuparte por las actualizaciones que tengas que hacer o puedes desactivarlo a la hora de que quieras descartar algún inconveniente, si no sabes cómo hacer un plugin personalizado puedes darle al siguiente enlace para que te descargues el Plugin para usar fuentes locales en el administrador de bloques de WordPress.
¿Cómo mejorar el rendimiento WEB al usar fuentes locales?
Al añadir fuentes a tu sitio WEB de forma local mejoras considerablemente los tiempos de carga, ya que reduces el número de peticiones y los tiempos de espera, sobre todo si el archivo de las tipografías es muy pesado.
Sin embargo, para evitar el bloqueo del navegador durante la carga de tu contenido y mejore el rendimiento, lo más recomendable es que adicionalmente apliques la precarga del archivo de las fuentes.
Hacer la precarga de las fuentes consiste en hacer un llamado previo al archivo de las tipografías de tu WEB, para que el navegador del visitante las comience a cargar a penas comenzar a cargar los elementos de tus contenidos.
Precargar las fuentes locales con código
Sea cual sea la tecnología con qué esté realizado tu sitio WEB, puedes precargar las fuentes colocando una llamada en el Head de tus contenidos, indicando donde se encuentra el archivo de la tipografía, la sentencia general sería:
<link rel="preload" href="/ruta-de-tu-fuente/fuente.woff2" as="font" type="font/woff2" crossorigin=”anonymous”>Explicación de cada uno de los atributos de la precarga
rel=”preolad” indica al navegador que precargue el archivo de la fuente.
href=”ruta” es la ruta donde se encuentra el archivo de tu fuente tipográfica, puede ser una ruta dentro de tu servidor o un enlace de Internet, si vas a utilizar fuentes externas.
as=”font” indica que lo que se va a precargar es un archivo de fuentes.
type=»font/woff2″ especifica el tipo de archivo de la fuente, en el caso de que utilices un tipo de fuente diferente a woff2, tendrás que cambiarlo al correspondiente.
crossorigin=”anonymous” este atributo es utilizado para indicar una solicitud de «verificación previa» al servidor que aloja el recurso de origen, para verificar que el servidor permitirá la solicitud real, si quieres saber más sobre este atributo puedes ver este enlace donde hablan de los Atributos de configuración CORS, lo puedes colocar con colocar el valor de “anonymous” o dejarlo vacio y la sentencia quedaría:
<link rel="preload" href="/ruta-de-tu-fuente/fuente.woff2" as="font" type="font/woff2" crossorigin>Precargar las fuentes locales en WordPress con un plugin
Si quieres precargar las fuentes locales en tu WEB y utilizas WordPress es más sencillo, ya que hay varios plugins que te pueden ayudar, uno que yo utilizo y recomiendo como consultor de SEO profesional es el Perfmatters.
Para ello es necesario ir a la sección de precarga “Preloading” agregar el recurso que desees cargar colocando la ruta en donde se encuentra, el tipo de recursos que vas a cargar, qué tipo de dispositivo se realizará la precarga y la localización, además si es o no necesario el crossorigin.
Para este caso, como vas a usar las fuentes locales en WordPress con el plugin Perfmatters solo debes llenar los siguientes campos:
- La ruta del archivo.
- Tipo de archivo = Font.
- Tipo de dispositivo = All Devises.
- CrossOrigin = Marcado.
Precargar las fuentes locales en GeneratePress
Si utilizas la plantilla GeneratePress en la versión Premium, puedes precargar las fuentes locales sin la necesidad de utilizar ningún plugin adicional, gracias al uso de Hook o ganchos de programación, que son elementos que te permiten hacer acciones personalizadas dentro de la plantilla.
Para crear un Hook que te permita precargar las fuentes es necesario que vayas a la opción Apariencia ►Elementos y presionas el botón de “Añadir un nuevo Elemento” para que se abra una ventana emergente.
Aquí elige la opción “Hook” y se abrirá una pantalla muy parecida al editor clásico de WordPress, lo primero que tienes que colocar es un título descriptivo al Hook en este caso “Precarga de fuentes”. Lo siguiente es colocar en el cuerpo del Hook la misma sentencia que utilizas para precargar las fuentes locales con código.
Una vez agregues el código con la ruta donde se encuentran las fuentes en tu servidor de hosting debes bajar para llegar a la sección de “Ajustes”, allí debes revisar que la opción “Hook” tenga el valor “wp-head”, el resto lo puedes dejar igual.
Como vas a usar fuentes de letras en todo el sitio WEB, es necesario que en la pestaña de “Reglas para mostrar” la opción “Posición” tenga el valor de “Todo el sitio”, el resto de las opciones la puedes dejar igual.
Una vez termines de hacer todos estos ajustes, lo único que debes hacer para utilizar la precarga de fuentes locales en WordPress con GeneratePress, es darle al botón de “Publicar” que se encuentra en la sección del mismo nombre que está del lado derecho de la pantalla.
Es importante que recuerdes que si utilizas algún tipo de caché en tu sitio WEB, será necesario que la vacíes para que puedas visualizar los cambios más recientes de forma correcta, ya que de lo contrario puede que no notes la diferencia.
Recomendaciones finales sobre cómo puedes usar fuentes locales en tu WEB para mejorar la velocidad de carga de los contenidos
Cómo pudiste ver alojar una fuente tipografía en tu servidor de hosting te brinda más control, velocidad y estabilidad, lo que es esencial para que tu sitio WEB aproveche mejor los recursos y ofrezca una experiencia de usuario de calidad.
Al aplicar todas estas estrategias de WPO, ya no tendrás más excusas para decir “no me aparecen las fuentes instaladas en mi WEB” y notarás una diferencia en la velocidad de carga de tus contenidos.
Si todavía tienes dudas sobre cómo usar fuentes locales en tu sitio WEB, puedes hacer contacto conmigo y así me cuentes como te puedo ayudar. Además, si necesitas ayuda con el desarrollo o mantenimiento WEB, también puedes ver los servicios que ofrezco en asesoría y soporte para tu negocio.
En la parte de abajo, déjame un comentario contándome qué te pareció este artículo y si te ayudo a saber todo lo que necesitas sobre cómo hacer para usar fuentes locales en tu WEB, o también si tienes alguna duda, sugerencia o reclamo y así podré contar con tu valioso aporte.
