poner fuentes con CSS

#fuentesconCSS

volvemos con la WIR-escuela y esta vez vamos a cambiar las fuentes de nuestro tema de wordpress de una manera muy sencilla y sin usar ningún plugin, que los plugin están guay pero usados en su justa medida, siempre que podamos hacer cosas con código, ¡mejor que mejor!

Puede ser que tu tema traiga fuentes pero no muchas y las que tiene no te gustan mucho… bueno, pues tranquilidad porque hoy te enseñaré cómo poner cualquier fuente del inmenso y gratuito catálogo de Google Font en tu página web o blog.

antes de nada…

  • comentarte que hay distintas formas de añadir fuentes de Google Fonts a tu wordpress pero yo te explicaré solo una de ellas, la que me parece más sencilla y eficaz 🙂
  • haz una copia de seguridad si no estas muy acostumbrada a toquetear cosas (aunque son leves) de tu archivo donde tienes los cambios de CSS

¡vamos con el paso a paso!

  • lo primero, primerísimo de todo es visitar la web de Google Fonts y bucear entre todas las tipografías que hay en ella y seleccionar la que más nos guste.
  • cuando nos hayamos decidido, pulsamos en el símbolo «más» con un círculo rojo para AÑADIR esta fuente a nuestras preferidas

seleccionar fuente de google fonts

  • para este ejemplo he seleccionado Josefin Sans y al hacerlo, al pulsar sobre el símbolo «más» rojo, se abre una pestaña justo abajo, al final de la página, tal que así:

selección de fuentes en google fonts

  • si abrimos esa pestaña se verá toda la información de la fuente y veremos los datos que necesitamos para instalarla en nuestro wordpress.

selección de fuentes en google fonts

  • vamos a necesitar la información que hay en la pestaña de @IMPORT
  • seleccionaremos lo que está detrás del @ (en nuestro caso sería @import url(‘https://fonts.googleapis.com/css?family=Josefin+Sans‘);
  • casi todas las plantillas de wordpress suelen tener un espacio dedicado solo para introdudir código CSS sin tener que pasar por el editor. Tan solo debemos poner en la primera línea lo que os contaba justo arriba del @ y lo pegamos justo arriba del todo.
  • justo a continuación y para que nuestra tipografía «funcione» en nuestra web debemos ahora, con CSS, asignarla a donde queremos que se cambie. Si va a ser en todo el texto de la web podríamos esto: body {font-family: ‘Josefin Sans’, sans-serif;}
  • esto lo colocamos en el mismo espacio donde hemos colocado la parte de @import, a continuación
  • si solo queremos que sea para el título 1 (H1) en lugar de body pondremos h1 y así solo afecta al título 1

para terminar…

esto lo podemos hacer añadiendo todas las tipografías que queramos pero… ¡shhh! con cuidado… pongamos solo las tipografías que vayamos a usar porque si ponemos muchas puede repercutir negativamente en el tiempo de carga de la web … y también por DISEÑO, no vayamos a marear a la persona que nos lee con tanta feria de tipografías, con dos va bien ;)[/fancy-ul][vc_column_text]Espero que os venga bien y si tenéis alguna duda no os cortéis en preguntar, ¿vale?

 

¡Nos leemos! 

🙂

 suena: everything now – arcade fire o si prefieres verlo y escucharlo

 

¿te ha gustado?

¡comparte pues!

Facebook
Twitter
LinkedIn
Pinterest
Email
¿quieres ser más de lo que ya eres?

¡trabaja con nosotros!

1 comentario en “poner fuentes con CSS”

Dejar un comentario

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

“Al enviar aceptas la política de privacidad. Los datos que proporciones al enviar tu comentario, serán tratados conforme la normativa vigente de Protección de Datos y gestionados en un fichero privado por Ana Cristina Gadea Sánchez, propietaria del fichero. La finalidad de la recogida de los datos, es para responder únicamente y exclusivamente a tu comentario. En ningún caso tus datos serán cedidos a terceras personas. Consulta más información en mi Política de privacidad.