Cuando se trata de alojamiento y uso de fuentes en su sitio WordPress hay un montón de opciones diferentes. Puede alojarlas localmente, puede utilizar las fuentes de Google (la mayoría de los temas de hoy día tienen las fuentes de Google integradas), o utilizar otro servicio de terceros como Adobe Fonts. Hoy queremos sumergirnos en algunas razones por las que alojar fuentes locales en WordPress puede ser ventajoso. No sólo se puede tener una mayor selección de fuentes HTML, sino que a veces hay beneficios de rendimiento también. Eche un vistazo a nuestro tutorial detallado a continuación sobre cómo alojar sus fuentes premium localmente, así como cualquier familia de fuentes de Google fonts.
- ¿Qué Son Las Fuentes Web?
- Alojando Fuentes Locales vs. de Terceros
- Cómo Alojar Fuentes Locales en WordPress
¿Qué Son Las Fuentes Web?
Cuando navega por el sitio WordPress de alguien, verá dos tipos de fuentes básicas, fuentes web seguras o fuentes web. O también podrían estar usando una mezcla de ambos.
Lectura sugerida: ¿Cómo Cambiar la Fuente en WordPress?.
- Fuentes seguras para web son fuentes que están preinstaladas en un dispositivo u OS. Algunos ejemplos de fuentes de seguridad web incluyen Arial, Times New Roman y Courier New, así como familias de fuentes genéricas como serif, sans-serif (ver fuentes modernas) y monospace. Estas son las fuentes que ha visto durante muchos años. Vea una lista entera de fuentes seguras de la web.
- Fuentes web son fuentes que no están preinstaladas en un dispositivo y deben ser descargadas por el navegador del usuario antes de ser mostradas. Algunos ejemplos de fuentes web incluyen la fuente Open Sans y Roboto de Google, así como la popular fuente Proxima Nova de Adobe Fonts.
Fuentes de Google es un directorio de fuentes de fuente abierta que se ha vuelto ampliamente utilizado en los últimos dos años. Según BuiltWith, más del 45% de los 10,000 principales sitios web están utilizando Google Fonts en sus sitios web. Y si observamos a las analíticas de Google Fonts, podemos ver que han tenido más de 17 billones de visitas. ¡Eso es mucho! Open Sans y Roboto son sus dos familias de fuentes más utilizadas, con Roboto viendo un enorme crecimiento del 77% en el último año.
Alojando Fuentes Locales vs. de Terceros
Antes de profundizar en el tutorial es importante entender algunas de las ventajas y desventajas entre las fuentes locales de alojamiento y el simple uso de un servicio por parte de terceros. Alojar fuentes localmente significa que usted realmente tiene los archivos de fuentes en su propio servidor (y/o copiados en la CDN, que también se utiliza para todos sus otros activos). Mientras que si se utilizan una de terceros, como Google o Adobe Fonts, usted está sólo incluyendo las fuentes mediante la vinculación a un activo externo.
Ventajas de Fuentes Locales
1. Selección Más amplia de Fuentes
¡Una gran ventaja de usar fuentes locales es que usted tiene una selección mucho más amplia de fuentes! Mientras que los servicios de terceros como Google Fonts y Adobe Fonts tienen grandes bibliotecas, no se pueden comparar con tiendas de fuentes premium en las que puede comprar cualquier fuente web premium que desee y alojarla en su sitio. De hecho, usaremos una fuente premium en nuestro tutorial a continuación, la cual no puede obtener de ningún servicio de terceros.
2. Se Puede Integrar Mejor
Debido a la selección más amplia de fuentes, alojarlas localmente podría permitirle elegir una fuente que se integre mejor con su marca para mantener la consistencia en todo el sitio. Todo esto depende de sus necesidades y preferencias de diseño.
3. No Tener que Depender de Servicios de Terceros
Cuando aloja fuentes localmente, usted no tiene que depender de servicios de terceros o de sus servidores. Servicios como Adobe Fonts han sido conocidos por quedar fuera de servicio, que a su vez hace que usted se vea mal. Tener menos dependencias en su sitio WordPress es siempre mejor.
When https://t.co/Kde0okKlP0 is down the web stops working #customfontssuck #3rdpartyjs
— Mark ⛔️🐝 (@markhealey) November 17, 2015
4. Control Total en Vez de Usar Cache
Mediante el uso de fuentes locales, usted tiene control total sobre la cache de los archivos de fuentes. Si utiliza fuentes de Google u otro servicio de terceros, es posible que vea errores o advertencias de que los recursos no tienen un validador de cache o que necesitan cadenas de expiración. Éstos se fijan en el nivel del servidor, y cuando están en un servidor de terceros usted no tiene ningún control de los defectos que pueden surgir.
5. Menos Peticiones Pueden Significar Tiempos de Carga Más Rápidos
Debido al hecho de que las fuentes web tienen que ser descargadas de un tercero, esto a su vez podría tener un impacto en la velocidad de carga de su sitio. Nunca se sabe lo rápido que sus servidores están operando en el momento dado. ¡Usted sin embargo tiene más control sobre esto con su WordPress host, o al menos debería tener! Adobe Fonts, por ejemplo, agrega 2 peticiones HTTP externas y también base64 codifica todos los formatos de fuente. Si no está familiarizado con las fuentes ya no tiene que servir todos los formatos de fuente, sólo necesita WOFF y WOFF2 (si desea compresión adicional).
Con Google Fonts usted también tiene una solicitud de DNS adicional para buscar fuentes.googleapis.com para obtener el archivo CSS. Después tiene solicitudes adicionales a fonts.gstatic.com para descargar los archivos de fuentes. Cuando usted se aloja localmente, todas las solicitudes vienen del mismo dominio, y lo más probable es que no necesite otro archivo CSS, ya que estará dentro del archivo CSS de su tema de WordPress.
6. Conexión Singular HTTP/2
Si no ha leído sobre las ventajas de HTTP/2 todavía, le instamos a hacerlo. Al alojar sus fuentes localmente o en su CDN, puede aprovechar una única conexión HTTP/2 para mejorar el paralelismo y la multiplexación.
Desventajas de Fuentes Locales
Ahora que hemos pasado por las ventajas de las fuentes locales, también hay algunas desventajas de las cuales debemos estar conscientes.
1. Google Font Puede Ser Cacheada Ya
Google Fonts utiliza su propia CDN que es rápida, ya que es Google a fin de cuentas. Debido al hecho de que tantos sitios web ya utilizan fuentes de Google, es muy probable que el usuario ya tenga la fuente en la cache de su navegador. Si utiliza una fuente premium más exclusiva, podría aumentar los tiempos de descarga. Por ejemplo, si alguien visita un sitio web que utiliza la fuente Roboto de fuentes de Google, se descargará en su cache. Si luego visitan su sitio web, que también utiliza Roboto, la fuente no tendrá que ser descargada de nuevo. Pero si está utilizando una fuente premium recién liberada, como Proxima Soft, lo más probable es que tenga que descargar, lo que podría aumentar los tiempos de carga.
La clave aquí es que va a utilizar una fuente premium que no se utiliza ampliamente, probablemente deba considerar que el navegador de esa persona que visita su sitio necesitará descargar esa fuente cuando llegue por primera vez a su sitio web. Nota: si utiliza un Google font y se lo aloja localmente como Roboto esto no se aplica ya que el navegador es bastante listo para detectarlo en la cache (da lo mismo si se carga desde Google o localmente de su sitio).
2. Más Complejo
Nos damos cuenta de que no todo el mundo es un crack de WordPress. Alojar fuentes locales definitivamente toma un poco más de configuración. Por ejemplo, un tema de WordPress puede llamar Google Fonts automáticamente en su tema y si aloja fuentes localmente necesitará encontrar una forma de deshabilitarlas para que dejen de llamar a su sitio. Esto podría implicar una consulta con su desarrollador de temas para introducir una línea rápida de código. Esto puede sonar complicado, pero vamos a tratar de explicar lo más fácil posible en el tutorial a continuación.
3. Más Cuidadoso Acerca de Opciones de Fuente
Cuando aloja fuentes locales, debe elegir los tipos de fuente que desea admitir. Si elige sólo los formatos más recientes, como simplemente WOFF2, podría estar dejando fuera los navegadores más antiguos que a su vez, regresarían por defecto a las viejas fuentes web seguras. Por ejemplo, de acuerdo con CanIUse, IE11, Safari, y algunas versiones del Navegador Android podrían tener problemas con el uso de fuentes Web WOFF2. Así que probablemente querrá usar WOFF + WOFF 2 para estar 100% seguro. WOFF 2 ofrece métodos de compresión mucho más altos, por eso querrá usar ambos.
Cuando utiliza un servicio de terceros, es casi imposible estropear esto, ya que estos se están encargando de una amplia gama de soporte para el navegador de inmediato. Así que al alojar localmente, usted tiene que tener más cuidado sobre sus selecciones de tipo de fuente.
4. No lo haga sin CDN
Muchos sitios hoy día están utilizando ahora una CDN como Cloudflare o KeyCDN para acelerar la entrega de sus activos. Esto es importante ya que reduce la latencia y los tiempos de búsqueda de DNS globalmente. Si utiliza fuentes locales y no utiliza una CDN, de hecho podría ralentizar su sitio en lugar de utilizar un servicio como Google Fonts o Adobe Fonts. La razón es porque todos esos servicios utilizan una CDN para entregar sus fuentes. Por lo tanto, recomendamos encarecidamente, a menos que sólo tenga tráfico en una pequeña área geográfica, siempre use una CDN si está alojando sus propias fuentes. Y, por supuesto, asegúrese de que esté utilizando un proveedor de CDN que soporte HTTP/2.
La Kinsta CDN sí soporta HTTP/2 y ancho de banda gratuito es incluido para todos los clientes. ?
Cómo Alojar Fuentes Locales en WordPress
¡Ahora viene la parte divertida! Alojar sus fuentes locales en WordPress. Pasamos por dos diferentes opciones a continuación, una es con una fuente premium que compramos, y la segunda es en realidad tomar una fuente de Google y alojarla localmente. En este tutorial estamos utilizando una nueva instalación de WordPress con el tema Twenty Seventeen instalado.
1. Cómo Alojar Fuentes Premium Localmente
Para alojar una fuente premium localmente, elegimos ir con Fontspring y la nueva Proxima Soft font lanzada en Enero de 2017. Proxima Nova Soft, creado por Mark Simonson, es una versión más reciente de la fuente original Proxima Nova. Elegimos Fontspring porque no requiere scripts de seguimiento de parte de terceros y la fuente es una compra única que se puede utilizar en un número ilimitado de sitios. Tenga mucho cuidado al comprar fuentes, ya que muchas de ellas requieren scripts de seguimiento de terceros, lo que en cierto grado derrota el propósito de hospedarlas localmente.
Compramos las fuentes Proxima Soft Regular y Proxima Soft Bold. Generalmente un tipo de fuente regular y negrita es suficiente para la mayoría de los sitios. Dependiendo de su sitio, es posible que también desee obtener una versión en cursiva y semi-negrita. Nota: ¡No tenemos ningún afiliado con Fontspring, simplemente pensamos que es una buena compra de fuentes premium!
Paso 1
Después de comprar sus fuentes, obtendrá un correo electrónico con un enlace a los archivos de fuentes.
Paso 2
Cada versión de la fuente, como negrita y regular, tendrá sus propios tipos de fuente, como WOFF2, WOFF, TTF, etc. En este ejemplo vamos a utilizar las versiones WOFF y WOFF2 de bold y bold regular, lo que asegura un soporte de navegador moderno balanceado.
Paso 3
Tomamos los archivos de fuentes y los subimos a través de FTP a nuestro sitio de WordPress a una carpeta que creamos llamada «fuentes». En este ejemplo, estamos usando una CDN para todos nuestros activos, junto con el plugin gratuito CDN Enabler del equipo de KeyCDN. Este plugin copia automáticamente nuestras fuentes que acabamos de subir a nuestra CDN. A pesar de que decimos alojarlas localmente, una CDN sigue haciendo referencia a sus activos locales. La parte importante es que está sirviendo todos sus activos desde la misma ubicación, sin hacer referencia a dominios múltiples (hosts).
Paso 4
Usted tendrá la necesidad de hacer referencia a sus nuevas fuentes en CSS en su sitio WordPress. Muchos temas tienen un panel CSS personalizado hoy día, o puede usar un plugin gratis como Simple Custom CSS y JS. Vamos a insertar el siguiente código, haciendo referencia a la URDL de nuestra CDN.
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
También tendrá que actualizar sus estilos para que apunte a la nueva familia de fuentes. He aquí un ejemplo del código que usamos en el tema Twenty Seventeen.
body {font-family: ‘proxima_softregular’, Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}
Aquí hay una captura de pantalla del plugin Simple Custom CSS y JS.
Paso 5
Si tu tema de WordPress tiene fuentes de Google ya integradas en él, deberá asegurarse de deshabilitarlas. De lo contrario, podría cargar tanto las fuentes locales como las fuentes de Google. Dado que estamos utilizando el tema Twenty Seventeen en este tutorial, utilizamos el plugin de Disable Google Fonts. Esto sólo funciona para los temas predeterminados en WordPress. Para la mayoría de los temas es probable que tenga que contactar su desarrollador y que puedan proporcionar rápidamente una función para desactivar las fuentes de Google. O comprobar su documentación, por lo general este es un ajuste muy rápido. Algunos temas pueden incluso tener una opción para activarlos o desactivarlos en el back-end.
¡Y eso es todo! Esta es una captura de pantalla con nuestra nueva fuente de Proxima Soft cargando para nuestra fuente de cuerpo y cabeceras en el tema Twenty Seventeen.
Y aquí hay una captura de pantalla de nuestras peticiones HTTP. Como puede ver, sólo tenemos 2 solicitudes para las fuentes WOFF2, en lugar de las 4 solicitudes de Google que mostramos anteriormente. Tenemos las fuentes de WOFF en el sitio también, pero puesto que Chrome apoya WOFF2, ésas serán utilizadas en su lugar. Si hubiéramos ido al sitio con IE 11 por ejemplo, las fuentes WOFF se habrían cargado en su lugar.
2. Cómo Alojar Google Fonts Localmente
La segunda forma de alojar fuentes localmente es usar una fuente que ya le encantó en Google Fonts y simplemente moverla a su servidor o CDN. Open Sans se sabe que es muy ligera y super rápida. Así que usaremos esta en nuestro ejemplo.
Paso 1
La mejor manera de agarrar las Fuentes de Google es usar la herramienta google-webfonts-helper , que estamos usando para este tutorial. Y quizás también desee comprobar el proyecto Font Face Observer. Lo primero que tendrá que hacer es buscar la fuente de Google que desee y seleccionar los estilos. Volvemos a elegir los estilos de fuente regular y negrita (700).
Paso 2
A continuación, tendrá que elegir el soporte de navegador que desee. Los navegadores modernos le darán las fuentes WOFF y WOFF2, que es lo que queremos. El mejor soporte le da WOFF, WOFF2, EOT, TTF y SVG. Como puede ver, le da el código que puede copiar en su portapapeles, así como el zip de descarga que contiene las fuentes.
El resto de las instrucciones son muy similares a nuestro ejemplo de fuentes premium anterior.
Paso 3
Tomamos los archivos de fuentes y los enviamos a través de FTP a nuestro sitio de WordPress a una carpeta que creamos llamada «fuentes». En este ejemplo, estamos usando una CDN para todos nuestros activos, junto con el plugin CDN Enabler gratuito del equipo de KeyCDN. Este plugin copia automáticamente nuestras fuentes que acabamos de subir a nuestra CDN. A pesar de que decimos alojarlas localmente, una CDN sigue haciendo referencia a sus activos locales. La parte importante es que está sirviendo todos sus activos desde la misma ubicación, sin hacer referencia a dominios múltiples (hosts).
Paso 4
Usted tendrá la necesidad de hacer referencia a sus nuevas fuentes en CSS en su sitio WordPress. Muchos temas tienen un panel CSS personalizado hoy día, o puede usar un plugin gratis como Simple Custom CSS and JS. Insertaremos el código siguiente haciendo referencia a la URL de nuestra CDN.
/* open-sans-regular – latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
También tendrá que actualizar sus estilos para que apunte a la nueva familia de fuentes. He aquí un ejemplo del código que usamos en el tema Twenty Seventeen.
body {font-family: ‘Open Sans’, Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}
Aquí hay una captura de pantalla del complemento Simple Custom CSS y JS.
Paso 5
Si tu tema de WordPress tiene fuentes de Google ya integradas en él, deberá asegurarse de deshabilitarlas. Esto puede parecer un poco irónico, ya que estamos usando fuentes de Google. Pero la razón por la que necesita hacer esto es desactivar las peticiones externas. Dado que estamos utilizando el tema Twenty Seventeen en este tutorial, utilizamos el plugin de Disable Google Fonts gratis. Esto sólo funciona para los temas predeterminados en WordPress. Para la mayoría de los temas es probable que tenga que buscar un desarrollador que pueda proporcionar rápidamente una función para desactivar las fuentes de Google. O comprobar su documentación, por lo general este es un ajuste muy rápido. Algunos temas pueden incluso tener una opción para activarlos o desactivarlos en el back-end.
¡Y eso es todo! Esta es una captura de pantalla con nuestro nueva fuenta Google Open Sans cargándose para nuestra fuente de cuerpo y cabeceras en el tema Twenty Seventeen.
Y aquí hay una captura de pantalla de nuestras peticiones. Como puede ver, sólo tenemos 2 solicitudes para las fuentes WOFF2, en lugar de las 4 solicitudes de Google que mostramos anteriormente. Tenemos las fuentes de WOFF en el sitio también, pero puesto que Chrome apoya WOFF2, ésas serán utilizadas en su lugar. Si hubiéramos ido al sitio con IE 11 por ejemplo, las fuentes WOFF se habrían cargado en su lugar.
Resumen
¡Y eso es! Ahora sabe cómo alojar fuentes locales sean de una tienda de fuentes premium o mover las fuentes de Google a su propio servidor y/o CDN. Así que ahora usted puede ir a echar un vistazo a todas las fuentes hermosas por ahí sin preocuparse tanto por cómo afectan el rendimiento. ¡Podrían dar un maquillaje a su sitio WordPress que ha estado necesitando! (asegúrese de leer nuestra guía detallada sobre las fuentes de WordPress) Y si usted está curioso del por qué no estamos usando fuentes locales, es porque estamos trabajando en un nuevo diseño de sitio web, por lo que podríamos usarlas en un futuro próximo.
Nos encantaría saber cuál es su configuración. ¿Está utilizando un servicio de terceros para cargar sus fuentes web y ya ha tratado de alojar localmente?
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Deja una respuesta