Uno de los elementos más importantes de cualquier diseño web y que pueden generar un impacto visual tanto positivo como negativo, son sin dudas las fuentes que se utilizan en él, lamentablemente muchas veces no se le presta la debida atención a la hora de integrarlas al sitio y en el caso de WordPress existen varias alternativas diferentes de hacerlo, sin embargo una manera que a pesar de sus numerosas ventajas, no se suele considerar a menudo es la de alojar las fuentes localmente.
Una de las alternativas es alojarla localmente, donde se pueden descargar y almacenar localmente en el hosting en lugar de enlazar a orígenes de fuentes externas, que al día de hoy es el método más común.
Por eso hoy profundizaremos en algunas de las razones por las que puede ser una buena idea alojar estas fuentes en forma local en el servidor para emplearlas en WordPress, tanto para mejorar el rendimiento como la seguridad.
Contenido
¿Qué es una Fuente Web?
Una fuente es un tipo de letra que nos permite mostrar el texto en una aplicación o sitio web, donde estos últimos pueden utilizar dos tipos de fuentes diferentes, el primer lugar están las fuentes que están instaladas en la computadora y que se denominan fuentes web seguras, porque son provistas por el propio sistema operativo y que se consideran fuentes estándar.
Los sistemas operativos incluyen esas fuentes no solo para el uso de los navegadores Web, sino también para el uso por parte del propio sistema operativo y por cualquier aplicación que se ejecute en el sistema, por ejemplo los editores de texto o suites de ofimática, como ejemplos de este tipo de fuentes son Arial, Times New Roman, Helvetica o Verdana y donde también se incluyen lo que se llama familias de fuentes genéricas como serif, sans-serif y monospace.
Por otro lado, tenemos las fuentes de origen web y son fuentes que no están instaladas en el dispositivo sino que deben ser descargadas por el navegador como un recurso más de la web antes de ser mostradas, algunos ejemplos de fuentes web son por ejemplo las conocidas Open Sans y Roboto de Google o la también popular Proxima Nova de Adobe Fonts entre muchas otras.
Dentro de esta categoría de fuentes sin dudas el repositorio de fuentes de Google Fonts son las que se han convertido en una de las opciones más utilizadas en los últimos años, se calcula que más del 45% de los 10,000 principales sitios web están utilizando Google Fonts en sus sitios, siendo las ya nombradas Open Sans y Roboto son sus dos familias de fuentes más utilizadas, con Roboto viendo un enorme crecimiento.
Fuentes Locales vs. Enlaces Externos
Primero es conveniente repasar los pros y los contras que tiene alojar las fuentes de forma local o enlazar a sitios de terceros como Google o Adobe
Ventajas de Fuentes Locales
Selección de Fuentes
Al alojar las fuentes localmente en el servidor, tenemos la posibilidad de utilizar fuentes interesantes que no estén incluidas en los repositorios de terceros, como el caso de Google Fonts y Adobe Fonts que si bien tienen bibliotecas muy amplias no tenemos porqué limitarnos a ellas, en el mundo existen muchas más fuentes que en esos repositorios y vale la pena aprovecharlas.
Aparte de estos repositorios de fuentes públicos gratuitos, también existen sitios web que se dedican a vender licencias de fuentes, lo que se conoce como fuentes web Premium, estas fuentes no se pueden enlazar directamente como con Google Fonts por lo que la mejor opción es descargarlas localmente para usarlas en nuestros sitios.
No depender de servicios de terceros
Sitios de terceros siempre se pueden caer y quedar fuera de línea por más grandes y renombradas sean estos proveedores y bien puede que no dejen completamente inaccesible nuestro sitio, si puede afectar severamente la estética de forma parcial o total y eso no es algo bueno para nuestros usuarios que navegan en nuestro sitio que sin saber qué pasa realmente pensaran que nuestro sitio es feo o que no funciona.
Disponibilidad a largo plazo
Otro peligro de utilizar fuentes de un repositorio es que estos pueden cambiar a lo largo del tiempo, es poco probable es verdad, aunque es realmente posible, otra desventaja más probable es que desaparezca del repositorio, por un tema de derechos o simplemente por decisión del proveedor, por eso al almacenarlas localmente en nuestro propio servidor garantizamos que las fuentes siempre estén disponibles sin depender de un tercero y sus decisiones, las cuales no tenemos control.
Configuración de servidor
Al emplear fuentes de origen externo como puede ser Google o cualquier otro servicio, es probable que se vean algunos errores y/o advertencias de que tal o cual recursos no tienen un caché o se recomienda ajustar las cabeceras HTTP como por ejemplo la expiración de los recursos y el no poder hacerlo implica no poder optimizar nuestra web tanto como quisiéramos.
Para la mayoría de los usuarios esto puede no ser tan relevante, sin embargo, si se está buscando realizar una optimización a fondo del sitio se requiere ajustes del lado del servidor y si las fuentes están en servicios externos tenemos cero posibilidad de hacerlo.
Otra configuración importante que los proveedores externos no ofrecen, al menos no todos y un hosting propio, probablemente sí lo haga, se trata del soporte para HTTP/2 , lo que permite aprovechar una única conexión HTTP/2 para mejorar el paralelismo y la multiplexación de las conexiones.
Menos peticiones
El enlazar fuentes en servidores tercero implica peticiones a los dominios de esos proveedores y eso puede tener un impacto en la velocidad, la velocidad puede ser impredecible, por un lado porque si bien estos servicios están preparados para manejar un volumen de tráfico inmenso a través de sus servidores, estos no se destacan por su velocidad, sino por su alta disponibilidad, priorizan eso sobre la velocidad.
Aparte de la falta de optimización de las cabezas y caché que ya hablamos, cargar fuentes de terceros también incrementa los recursos enlazados, por ejemplo de CSS requeridos aparte de la propia fuente y al ser dominios diferentes, incluso las peticiones DNS a diferentes dominios aumentan, afectando el rendimiento y el tiempo de carga.
Desventajas de Fuentes Locales
Por supuesto, no todo son ventajas, también hay desventajas y es bueno tenerlas en cuenta
Si se utilizan fuentes de terceros es probable que el usuario ya haya visitado algún sitio que use la misma fuente y por eso ya la tenga en el caché de su navegador, esto hará que el sitio un poco más rápido al omitir cargar nuevamente estos recursos.
Al utilizar las fuentes locales, a pesar de ser las mismas, las cargará de cero por ser un dominio diferente (el nuestro) y esto hará que se incrementa levemente el tiempo de carga, sin embargo por otro lado, este tiempo se podría ver compensado por otras mejoras de optimización justamente por tenerlas locales, con un sitio bien optimizado por usar fuentes locales se obtendrá un ahorro de tiempo mucho mayor que el que se consumirá por descargar las fuentes desde nuestro servidor.
No tan simple de hacer
Si dudas utilizar fuentes locales tiene una dificultad mayor de implementar que utilizar fuentes en recursos externos, si es que el theme lo hace desde un inicio, no es apto para usuarios principiantes, requiere algunos conocimientos de desarrollo web o una consulta con un desarrollador que lleve a cabo los cambios.
Cómo alojar las fuentes de forma local en WordPress
El primer punto es obtener la fuente que deseemos, puede ser de un repositorio público gratuito o alguna fuente premium, en caso de comprar una fuente premium se debe prestar atención a las condiciones y restricciones de uso.
Luego de comprar la fuente o descargarla desde un repositorio gratuito, una vez que las examinamos, veremos que las fuentes pueden estar compuestas de varios archivos, ya que una misma fuente viene en varios formatos, como negrita y regular, repartidos varios formatos como WOFF2, WOFF, TTF, etc.
Todos los archivos de fuentes deben ser subidos ya sea por FTP o por el Administrador de Archivos del hosting al sitio de WordPress, por ejemplo a una carpeta que creamos llamada «fonts», una vez hecho esto lo siguiente es incluir las fuentes en los archivos CSS.
La mayoría de los temas incluyen un editor CSS que permite insertar código CSS para agregar nuevo código o para modificar el comportamiento del CSS, sin embargo en el caso que este editor no esté incluido se puede utilizar un plugin como por ejemplo Simple Custom CSS y JS.
Por un tema de rendimiento lo ideal es siempre alojar las fuentes detrás de un CDN, sin embargo para simplificar lo haremos sin CDN utilizando directamente la url del sitio, el formato es bastante simple, especificamos cada url y el formato, la cantidad de urls puede variar según la cantidad de archivos que componen la fuente, un ejemplo puede ser:
@font-face {
font-family: 'pt_sansregular';
src: url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.eot');
src: url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.woff2') format('woff2'),
url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.woff') format('woff'),
url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.ttf') format('truetype'),
url('https://www.ejemplo.com/fonts/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: optional;
}
@font-face{
font-family: 'PT Sans Narrow';
src: url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Regular.eot');
src: url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Regular.eot?#iefix') format('embedded-opentype'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Regular.woff') format('woff'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Regular.ttf') format('truetype'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Regular.svg#webfont') format('svg');
font-display: optional;
}
@font-face{
font-family: 'PT Sans Narrow Bold';
src: url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Bold.eot');
src: url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Bold.eot?#iefix') format('embedded-opentype'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Bold.woff') format('woff'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Bold.ttf') format('truetype'),
url('https://www.ejemplo.com/fonts/PT_Sans-Narrow-Web-Bold.svg#webfont') format('svg');
font-display: optional;
}
Luego es el momento de asignar esa fuente a los elementos, por ejemplo:
body {
font-family: ‘PT Sans Narrow Bold’, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-family:'proxima_softbold', Arial, sans-serif;
}
Un detalle importante es que si el tema de WordPress ya utiliza por defecto fuentes de Google integradas en él, ahora estás deberá asegurarse de deshabilitarlas para evitar peticiones externas, en caso de no hacerlo podría cargar tanto las fuentes locales como las fuentes directamente en Google y todo lo anterior perdería sentido de ser o incluso peor, se podría mostrar una fuente diferente en lugar de la que queremos.
Para la mayoría de los casos el plugin Disable Google Fonts o Disable and Remove Google Fonts podría ser suficiente, sin embargo, para ciertos temas es probable que tenga que contratar un programador para deshabilitarlos manualmente, esto es necesario para bloquear la posibilidad que se hagan peticiones externas innecesarias.
Conclusión
En el artículo repasamos tanto las ventajas como las desventajas que implica usar fuentes locales, si bien tiene algunas desventajas, lo cierto es que las enormes mejoras en rendimiento y seguridad que aportan las fuentes locales versus fuentes externas, hacen que las pocas desventajas se vean sumamente compensadas.
En algunos casos particulares puede ser un poco más complejo que lo mostrado, porque requiere adaptación producto de las características de las fuentes, así como del theme utilizado, sin embargo, los pasos a grandes rasgos serían esencialmente los mismos.
De esta forma, ahora puede incorporar a toda una nueva gama las fuentes interesantes y atractivas que podemos encontrar sin preocuparse tanto por cómo afectan el rendimiento, ya que lejos de afectar el rendimiento negativamente, incluso puede mejorarlo.
