Tipografías/Fuentes/Fonts en WordPress  

 
Iñigo
 Iñigo
Usuario experto

Buenas,

Quisiera conocer más a fondo la mejor forma de implementar fuentes en WordPress.

He encontrado muchos tutoriales e información en la red pero no me queda claro si es mejor que carguen desde el propio hosting o de algún servicio externo.

Podríais explicarme por favor cuales son las bondades e inconvenientes de cada opción?
Cual sería vuestra recomendación?

También me gustaría saber vuestra opinión sobre los siguientes datos:
- Content size by content type: Font 19.22% 796.1 KB
- Requests by content type: Font 20.00% 17 (requests)

Casi un 20% del tamaño total de la página cargada con un peso de 796.1 KB y 17 peticiones me parece mucho. Aunque no tengo experiencia suficiente para afirmarlo.

Sí que es cierto que tengo ahora mismo unas cuantas tipografías en la home porque estoy empezando el proyecto, pero por eso mismo quiero aclarar este punto de las tipografías, para decidir con cuales me quedo y cómo implementarlas.

Muchas gracias,
Iñigo

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 11/11/2019 7:34 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/11/2019 8:28 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Iñigo
 Iñigo
Usuario experto

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

ResponderCitar
Respondido : 13/11/2019 1:47 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 13/11/2019 3:11 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Iñigo
 Iñigo
Usuario experto

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

ResponderCitar
Respondido : 13/11/2019 4:31 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 13/11/2019 5:31 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Por favor Iniciar Sesión o Registro