Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS
Hoy vamos hablar de cómo puedes cambiar los tipos de letra, las tipografías de tu wordpress de manera sencilla, pero antes un poco de autobombo!!!:
Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es
Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!
Hoy te voy a contar:
Cómo cambiar los tipos de letra de tu WordPress
Básicamente hay dos opciones, la fácil y la profesional:
Forma fácil
Para los que no queráis complicaros mucho la vida, podéis acudir al plugin Easy Google Fonts. El inconveniente de este sistema es que el catálogo de fuentes es limitado y, además, únicamente podrás cambiar las fuentes de los títulos h1, h2, h3, etc. de forma genérica, por lo que todos los h1 de la web se configurarán con esa tipografía; algo que tal vez no te interese.
Forma profesional
Esta es la opción para cambiar la tipografía de una plantilla WordPress que más me gusta porque es la que más libertad de personalización te ofrece sin tener que gastarte ni un duro o muy poco dinero por el camino.
Se trata de descargar la fuente que más te guste de Internet y cargarla tú mismo al servidor de WordPress. Personalmente me gusta usar Google Fonts y 1001freefonts.com porque tienen un catálogo de fuentes espectacular y son gratuitas.
El único incordio de este método es que debes tomarte las molestias de subir los archivos y, además, deberás escribir código CSS para aplicar las tipografías en tu web.
Pero no te preocupes, te lo he puesto todo muy fácil para que puedas llevar a cabo la hazaña sin tener muchos conocimientos previos de CSS, o incluso sin que hayas accedido nunca antes al servidor de WordPress.
Vayamos paso por paso:
PASO 1. Elegir y descargar la tipografía
En este paso te recomiendo que tengas en cuenta dos cosas:
Lo más probable es que en los títulos de la web nunca llegues a usar los estilos de cursiva o negrita de la tipografía; además puedes añadir esas características a través del código CSS. Así que lo más inteligente es que te descargues la versión básica o “regular” de la fuente.
Si la tipografía elegida es de GoogleFonts la puedes importar en lugar de descargar. Luego te explico.
PASO 2. Cargar los archivos de la tipografía a WordPress
Para los que nunca hayáis accedido a los archivos de WordPress debéis saber que necesitaréis descargar un programa FTP, como FileZilla, que os de acceso al servidor de WordPress y a todos los archivos que hay en él; incluyendo las carpetas de vuestro tema, el código de la web, etc. FileZilla es bueno, bonito y gratuito y, además, muy fácil de usar.
Vamos a ello:
Lo único que necesitarás para acceder al servidor son estos datos (si no sabes cómo encontrarlos, piensa que generalmente te los facilita tu proveedor de hosting en el perfil de tu cuenta) :
Nombre del dominio o subdominio, dirección FTP, nombre de usuario y contraseña de acceso
Una vez has podido conectar con el servidor, debes encontrar la carpeta principal en la que se guardan todos los archivos del tema o plantilla que hayas instalado en tu web. Para darte una pista, dicha carpeta suele estar dentro de la ruta “wp-content/themes” y, por lo general, lleva el nombre del tema que has instalado.
Cuando hayas accedido debes encontrar otra carpeta en la que se guardan las fuentes o tipografías que vienen predeterminadas con el tema. Es posible que el archivo se llame simplemente “fonts”, aunque cada diseñador organiza los ficheros a su manera y no puedo darte una hoja de ruta exacta.
Para que te sea más sencillo encontrarla, piensa que dentro de ésta has de ver archivos con nombres terminados en .eot .ttf .woff o .svg. Estos tipos de archivo corresponden a los distintos formatos de tipografía que usa cada navegador web; un mismo formato no es compatible para todos los navegadores y por eso hay que instalarlos todos.
En esta misma carpeta es donde deberás colocar las fuentes que hayas descargado anteriormente. Únicamente has de pasar los archivos de tipo .eot .ttf .woff o .svg. Si no has encontrado ninguna carpeta con fuentes, puedes crear una tú mismo y colocarla donde quieras, aunque es aconsejable tenerlo todo en el mismo sitio.
Ahora que ya tienes los archivos de las tipografías subidos al servidor, solo te queda “explicarle” a tu plantilla o tema dónde se encuentran esos archivos para que pueda usarlos.
Para ello tendrás que acceder al archivo de estilos CSS original de tu tema, llamado “style.css”. Puedes encontrarlo en el “Editor” que encontrarás en el menú “Apariencia” del administrador de WordPress. O también puedes hacerlo como explicamos hace un par de semanas en el podcast pampua.es/38
Ahora vamos a añadir una nueva función de código al inicio del archivo CSS, colócala justo después de la información que verás sobre el tema y las licencias.
La función en cuestión se llama @font-face y servirá para indicarle a tu web dónde está el origen del archivo de la tipografía que vas a usar. Si has instalado más de una fuente, deberás hacer lo mismo para cada una de ellas por separado.
Te dejo una plantilla del código; puedes copiarla y pegarla al principio de tu CSS cambiando los atributos que hacen referencia al nombre del archivo y la ruta:
@font-face{
font-family: ‘Roboto’;
src: url('roboto/31F4B4_0_0.eot');
src: url('roboto/31F4B4_0_0.eot') format('embedded-opentype'),url('roboto/31F4B4_0_0.woff2') format('woff2'),url('roboto/31F4B4_0_0.woff') format('woff'),url('roboto/31F4B4_0_0.ttf') format('truetype');
}
Y después de haber explicado la forma “complicada”, te explico la opción de “importar” la fuente, en lugar de descargarla (sólo válido para Google Fonts)
En lugar de poner todo ese código en el CSS y tener que subir el archivo por FTP, puedes simplemente llamar al archivo de la fuente desde los servidores de Google con esta línea en el CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto');
La ventaja es que es mucho más sencillo de implementar pero no tienes el control sobre todos los archivos de tu web y aumenta ligeramente el tiempo de carga al tener que resolver recursos externos.
PASO 3. Establecer con CSS la tipografía de cada elemento de la web
Estamos ya en el último paso para cambiar la tipografía de una plantilla WordPress.
Ahora tienes que hacer lo mismo que expliqué en el episodio 38, usar el inspector para ver la clase del elemento al que te interesa cambiar la tipografía y luego modificar el CSS de WordPress y escribir en él las nuevas reglas de estilo. Te dejo una plantilla básica con los cambios esenciales que deberás aplicar a cada elemento, título o texto que quieras modificar:
.clase-a-modificar{
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 6rem;
line-height: 1.2;
}
¡Y ya está! Ya tienes tipografía nueva.
Espero que esta guía para cambiar la tipografía de una plantilla WordPress te sea de ayuda a la hora de darle el “toque” final y personal a tu página web.
EL PODCAST DE LA SEMANA
Hoy quiero recomendaros “Conocimiento Experto” del gran Salvador Mingo.
Semanalmente realiza análisis de libros, artículos y mucho más…
En el mundo de los Negocios (sobretodo en los negocios por Internet) hay un problema y este es el exceso de información, las personas no terminan de iniciar algo cuando surge otra cosa, esto sólo hace que pierdan su recurso más valioso, y el resultado no llegue. Lo que Salvador nos propone es aprender de los expertos, de las verdaderas figuras de autoridad mediante sus libros, que él nos resume.
Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, Youtube, etc.
Y esto ha sido todo por hoy, si ya conocías cómo modificar los tipos de letra y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.
O si lo prefieres en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua
Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.
Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena
El jueves que viene hablaremos de cómo poner galerías de fotos responsive en nuestro WordPress.
Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!
Deja una respuesta