Cómo agregar una fuente personalizada a un tema de WordPress con @fontface CSS3

Declarar una fuente personalizada en tu tema de WordPress es muy útil para personalizarlo y adaptarlo a tu carta gráfica. Sin embargo, a veces la fuente de tus sueños no se encuentra en las opciones de tu tema, ni en Google Fonts o TypeKit.

En este caso, tendrás que modificar un poco tu tema para agregar la fuente que deseas. Pero que no cunda el pánico, ¡te explicaré cómo hacerlo!

Descarga la fuente

Primero, necesitas tener la fuente, ya sea descargándola de sitios de fuentes como dafont por ejemplo, o por sus propios medios.

Cuidado con los derechos de autor, que debes respetar. No dudes en comprar la fuente cuando sea necesario. ¡Solo pagarás a quienes trabajaron en él para que puedas disfrutarlo!

Los formatos TTF y OTF se utilizan ampliamente en la actualidad y son compatibles con la mayoría de los navegadores. Sin embargo, si necesita convertir la fuente a otros formatos, vaya a Fuente Ardilla.

Sube la fuente a tu servidor

Sube tu fuente a una carpeta de "fuentes" en tu tema (preferiblemente tema secundario), a través de FTP.

Declara tu nueva fuente en tu CSS

Vaya al archivo CSS del tema secundario si cargó la fuente en la carpeta "fuentes" del tema secundario; de lo contrario, al archivo CSS del tema principal, o en la configuración de su tema si le permite personalizar CSS a través de el backoffice de WordPress. He aquí cómo hacerlo:

@font-face { font-family: myfont; src: url("fuentes/mapolice.otf"); src: url(fonts/mapolice.ttf) formato('truetype'); peso de fuente: normal; }

Utilice la nueva fuente a través de CSS

Para usar su nueva fuente recién declarada, nada podría ser más simple, solo necesita indicarle al archivo CSS a qué formatos desea asignar la fuente:

p,span {familia de fuentes: mapolice, Open Sans, Arial, sans-serif !importante;} h1,h2,h3,h4,h5,h6 {familia de fuentes: mapolice, Open Sans, Arial, sans-serif !importante ;} ;} div {familia de fuentes: mapolice, Open Sans, Arial, sans-serif !important;}

Y ahí lo tienes, si este artículo te ha ayudado no dudes en compartirlo en las redes sociales 😉