Vamos a ver como identificar las fuentes que usar mi sitio web o wordpress, para poder optimizar el rendimiento de la web a veces necesitamos saber qué fuentes usa mi sitio web, una vez las identificamos podemos cargarlas localmente sobre todo google fonts para mejorar el rendimiento de la web y disminuir el numero de peticiones , si te interesa como cargar google fonts en local mira este otro articulo que publicamos recientemente.
- Identificar las fuentes que usa nuestra web con GTMETRIX
- Descargar las fuentes que usa nuestra web en local
- Usar Transfonter para identificar el nombre la fuente
- Revisar los resultados de Transfonter para ver font-family font-weight y font-style.
Identificar las fuentes que usa nuestra web con GTMETRIX
Para localizar google fonts en wordpress sin plugin o en cualquier otra web que no sea wordpress tenemos que hacer uso de una excelente herramienta online gratuita llamada GTMETRIX, podeis acceder en este enlace.
Tenemos que escanear nuestra página web para ver el resumen de todas las metricas. En la tercera pestaña que se llama “Waterfall” nos encontramos varios filtros, el que nos interesa es “Fonts” donde podemos ver qué fuentes usa wordpress.
Descargar las fuentes que usa nuestra web en local
La primera columna que aparece es el nombre de las fuentes que usa nuestro sitio wordpress, algunas tienen un nombre legible que identifica a la fuente como puede ser “fa-brands-400.woff2” o “typicons.woff”, pero algunas de ellas son un enlace de numeros y letras, esas son las más dificiles de localizar pero vamos a saber facilmente como identificar las fuentes que usa nuestra web y para ello hay que descargarlas, si hacemo clic en el icono “+” de la izquierda de cada fuente veremos que se despliega toda la información adicional.
Si hacemos clic en el enlace nos va a descargar el archivo de fuente en nuestro ordenador, tenemos que hacer esto con todas las fuentes que aparecen en el listado porque las vamos a usar en el siguiente paso “Usar Transfonter para identificar el nombre de la fuente”
Nos va a quedar una bonita colección de fuentes como la que te muestro en la siguiente captura de pantalla:
Usar Transfonter para identificar el nombre la fuente
Para localizar google fonts en wordpress sin plugin tenemos que usar una herramienta online gratuita llamada “Transfonter”, podés acceder a través de este enlace.
Lo que vamos a hacer es subir las fuentes que previamente hemos descargado a esta herramienta online que nos va a devolver todos los detalles que necesitamos de las fuentes:
- –Font-family
- Font-weight
- Font-style
Para ello tenemos que darle al botón de “Add fonts”, añadimos todas las fuentes que queramos, ya se una por una o todas a la vez, y le damos al botón “Convert”:
Una vez le demos al botón “Convert” en transfonter veremos el resumen de fuentes que hemos subido con sus respectivos tamaños
Revisar los resultados de Transfonter para ver font-family font-weight y font-style.
Nos aparecerán dos opciones :
- Download : Para descargar las fuentes
- Preview: Para previsualizar las fuentes
Tenemos que usar esta segunda opción de “Preview” para que nos muestre el resumen de las fuentes que hemos subido con todos los detalles que nos interesa
Puede parecer complicado cambiar icono de telegram en wordpress pero basicamente usamos un icono de redes sociales normal como puede ser el de facebook que está totalmente integrado en wordpress en cualquier tema y lo sustituimos por una imagen mediante CSS, en este caso es como insertar icono de telegram en wordpress pero es valido para cualquier otro icono de redes sociales.
Nos aparecerá en pantalla un resumen de todas las fuentes que carga nuestra web, hay que darle para abajo porque puede ser bastante larga, aqui veremos informacion de las propierdades CSS de la fuente que hemos mencionado previamente.
Más detalles sobre estas propiedad Css como siempre en W3School
