Fernan Díez - fernan.com.es

Diseño Web WordPress & Marketing Online

  • Inicio
  • ¿Quién soy?
  • Podcast
  • Contactar

#94 Preguntas sobre cómo añadir fuentes propias en mi tema de WordPress

1 diciembre 2016 por Fernan Dejar un comentario

http://media.blubrry.com/fernan/p/www.fernan.com.es/wp-content/uploads/2016/11/94-preguntas-como-anadir-fuentes-propias-tema-wordpress.mp3

Podcast: Reproducir en una nueva ventana | Descargar (Duración: 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!

Archivado en:General, WordPress Diario Etiquetado con:fuentes, Podcast, tipografías, WordPress Diario

Suscríbete a WordPress Diario

WordPress Diario es un podcast diario sobre Diseño y Desarrollo Web con WordPress y Marketing Online. ¡Suscríbete!

iTunes iVoox Feed RSS

Acerca de Fernan

Mi nombre es Fernan Díez y me dedico al Diseño Web en WordPress y el Marketing Online.

Deja una respuesta Cancelar la respuesta

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

WordPress Diario

WordPress Diario es un podcast sobre sobre Diseño y Desarrollo Web con WordPress y Marketing Online.

Recuerda que puedes suscribirte al podcast WordPress Diario, desde Apple Podcasts, Spotify, iVoox o mediante el feed RSS.

Hola, ¿qué tal?

Mi nombre es Fernan Díez y me dedico al Desarrollo Web en WordPress y el Marketing Online.

Te doy la bienvenida a mi web donde escribo artículos de ayuda sobre diseño web, recopilo recursos para blogs en WordPress y comparto sitios web que resulten interesantes.

Contacta conmigo

    Nombre (requerido)

    Email (requerido)

    Tu mensaje

    Curso WPO WordPress Iniciación ¡Gratis en tu email!

    Completa los campos y recibirás todas las lecciones del curso en tu correo electrónico

    • Twitter
    • LinkedIn
    • Github
    • Contactar

    · Creative Commons 4.0 · Fernan Díez - fernan.com.es · Creado con WordPress ·

    Este sitio web utiliza cookies para ofrecerte una mejor experiencia online. Si continúas navegando consideramos que aceptas su uso.
    Aceptar