Podcast: Play in new window | Download (Duration: 8:43 — 8.0MB)
Durante esta semana he tenido algunas consultas que me han rondado relacionadas con fuentes propias en diseño web, y cómo integrarlas directamente en nuestro WordPress.
Cuando hablamos de fuentes propias o personalizadas nos referimos a esas fuentes que podemos tener instaladas en nuestro equipo, pero que no son fuentes seguras o fuentes soportadas nativamente por los navegadores o los sistemas operativos.
En este caso, debemos usar la regla @font-face de CSS para poder incorporar este tipo de fuentes en nuestro diseño, o en nuestro tema si estamos trabajando con WordPress.
¿Cómo añadir fuentes personalizadas en un tema de WordPress?
Vamos a explicar a modo de respuesta, los pasos que debemos dar para poder integrar en nuestro tema de WordPress las fuentes personalizadas.
Descargar fuentes
En primer lugar deberemos descargar las fuentes que queramos utilizar. Algunos de los sitios de fuentes más populares son los siguientes: Font Squirrel, DaFont o Google Fonts.
Yo personalmente os recomiendo un sitio un poco más desconocido, pero que además de permitir descargar la fuente, os permitirá generar el código para el @font-face que necesitaréis añadir en el siguiente paso en vuestra hoja de estilos. El sitio del que hablo es OnlineWebFonts.
Una vez descargadas, tendremos que subirlos a nuestro tema de WordPress, concretamente os recomiendo crear una carpeta llamada por ejemplo, fonts, donde subir las fuentes y tenerlas ordenadas.
Añadir @font-face
Como indicábamos, el siguiente paso es añadir las reglas de @font-face en la hoja de estilos style.css que deberíamos tener en nuestro tema. Las líneas de código que deberemos utilizar son muy similares a esta.
Declarar font-family
En último lugar deberemos llamar a esa familia de fuentes a través de font-family teniendo en cuenta que previamente la hemos declarado a través de @font-face en nuestra hoja de estilos. Os dejo un simple ejemplo de cada uno de los dos pasos anteriores, usando como ejemplo de un gist de GitHub donde podréis ver el uso de las fuentes Century Gothic y Handel Gothic BT.
Más información
Por otro lado, si quieres más información más detallada sobre cómo utilizar cualquier fuente o tipografía en tu web, te recomiendo este artículo del blog de Cybmeta, muy completo y bien documentado.
Si te ha gustado este episodio no olvides suscribirte a WordPress Diario a través de iTunes o tu podcatcher favorito y dejar tu valoración de cinco estrellas para ayudar a que este podcast siga creciendo.
Nos vemos en el siguiente episodio, que será mañana mismo, ¡hasta la próxima!
Deja un comentario