Tipografías/Fuentes/Fonts en WordPress  

HOla

De manera general para usar fuentes:

1- Te recomiendo de ser posible usar las fuentes estandard, es decir las que tienen todos los navegadores, especialmente para el cuerpo de tu sitio. (Arial, Helvetica, Times, etc.)

2- Si por alguna razón quieres usar una fuente diferente a las estándard, usa una fuente de un servicio externo como Google Fonts, la ventaja de esto es que la fuente seguramente se usa en varios sitios web que tu usuario ya ha navegador por lo tanto se mantendrá en la cache del navegador.

3- No uses más de 2 fuentes externas, es decir bastará definir fuentes para Títulos y contenido.

4- Las fuentes que selecciones no deberían tener todas sus variaciones, sólo selecciona las variaciones que uses, en Google Fonts te permite especificar por dejemplo si nunca usarás una fuente con 700 de weight no tiene sentido que la cargues.

Con esto optimizarás la carga de tu sitio.

Saludos.

Buenas,

Gracias por responder Jhon.
Perdona que insista pero me gustaría aprender más sobre este tema.

Podrías por favor explicarme cuales son las razones por las que es mejor utilizar un servicio externo para servir las fuentes?
No sería más rápido servirlas desde el propio hosting? Quizá consumen muchos recursos y no compensa?
Apenas se nota diferencia y es más cómodo usar Google Fonts?....

Sobre el peso y las peticiones (peso de 796.1 KB y 17 peticiones) que os comenté en el primer mensaje, son normales esas cifras?
Alguna forma de reducirlas aparte de las que comentas?

Saludos,
Iñigo

Hola Iñigo

Como te comenta Jhon lo mejor es utilizar fuentes estándar que ya están incluidas por defecto en Wordpress, estas son las que menos recursos consumen.

cuales son las razones por las que es mejor utilizar un servicio externo para servir las fuentes?

Siempre es mejor utilizar las fuentes que ya incorpora tu propia plantilla o las estándar que están incorporadas en WordPress por defecto. El uso de la API de Google Fonts consume recursos y por tanto reducirá la velocidad de carga de tus páginas, aunque los archivos de fuente ya se encuentren presentes en la caché del navegador del usuario.

Ten en cuenta que cada estilo que selecciones, dentro de cada familia, es un archivo distinto que el navegador debe descargar. Si usas las fuentes más populares aumentas las posibilidades de que ya lo tenga almacenado en su caché el usuario, algunas fuentes pueden ser Roboto, Open Sans, Lato, Oswald, Montserrat.

Tienes que pensar que cada fuente que utilices, si no esta cacheada en el navegador del usuario, tiene que descargar la fuente de la URL externa y eso como es lógico es una carga para la web y retrasara el inicio, no es mucho pero bueno es un consumo.

Lo bueno de tenerlo externamente es que no cargas tu cuenta de hosting pero tampoco es que sea mucho el consumo de disco.

con un peso de 796.1 KB y 17 peticiones me parece mucho.
El peso no es importante las peticiones si y eso dependerá de las fuentes que tengas ahora instaladas, lo mejor es que pruebes y dejes solo la fuente que quieras utilizar, no te aconsejo que hagas llamadas a muchas fuentes, supongo que con tener una fuente para el body y si quieres otra para los títulos, esto no representara mucha carga.

Otra cosa que tienes que tener en cuenta es que en las fuentes puedes importar estilos de las fuentes, solo seria importar la que necesites:

El consumo total que tengas por el tema de las fuentes es insignificante en comparación de los consumos que puedas tener con extensiones o de la propia plantilla.

Un saludo

Buenas Pepe,

Muchas gracias por tu respuesta. Me queda más claro este apartado de las fuentes.

Ahora bien, en las opciones del tema tengo unas fuentes seleccionadas pero para probar como quedan e cambiado por css algunas fuentes en diferentes sitios.
Que hace entonces Wordpress? carga por un lado las seleccionadas en el tema y por otro las modificadas por css? o carga sólo según vaya necesitando para visualizar la página?

Quiero decir, si en una página he puesto por css "font-family: Lato / font-weight: 400", no cargará toda la familia "Lato", ni cargara la que tiene por defecto el tema pongamos "Roboto"? o carga todo?

Espero haberme explicado.

Saludos,
Iñigo

Hola

La referencia por CSS es sólo un llamado a una fuente que ya debe estar cargada, es decir antes de cargar la página tiene que cargar todos los archivos de fuentes que necesitas (Tene en cuenta que se carga todo lo que hayas definido, lo uses o no, negrita, cursiva, etc. ), puedes usar o no las fuentes que se cargan esto lo defines por CSS.

En tu caso si te ha funcionado cambiar la fuente por CSS a Lato por ejemplo eso significa que ya desde el inicio debes haber tenido la fuente Lato cargada por defecto.

Saludos.