Medios de tulipán

Pensamientos emprendedores

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 hijo si ha subido la fuente en la carpeta “fuentes” del tema hijo, de lo contrario en el archivo CSS del tema padre, o en la configuración de su tema si le permite personalizar CSS a través del 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 😉

 

Mis últimos tuits

Nuevos cortos sobre Blooness 👉 Vitalidad, longevidad, pérdida de peso: la guía definitiva sobre las proteínas en la dieta cetomediterránea está online en Blooness. https://buff.ly/3xxNvpj
https://buff.ly/4cG2GM4

Nuevos cortos de Blooness 👉 El nuevo contenido premium sale en 48 horas, ¡y qué contenido! Esta será la guía más completa sobre la cantidad de proteínas que se deben consumir en una dieta cetomediterránea. Hasta muy pronto !
https://buff.ly/3L2KbFP

New Post: Combo, la mejor solución para acabar con el dolor de cabeza de la programación y gestión de RRHH https://buff.ly/4eE6JtT

Carga más

No te pierdas el asesoramiento empresarial por correo electrónico

Sin spam, solo un correo electrónico cuando se publica nuevo contenido..

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESES