JADE webs

Diseño web con Wordpress

  • Inicio
  • Sobre mí
  • Contacto
  • Hosting
  • WordPress
  • Blogging
  • Diseño
  • Fotografía
  • SEO
  • Copywriting

Descargar fuentes de Google Fonts

07/08/2017 por Esther Dejar un comentario

Hoy te voy a enseñar cómo descargar fuentes gratuitas de Google Fonts.

A estas alturas supongo que todos habéis oído hablar de Google Fonts, pero ¿lo habéis probado?

Google Fonts es una gran biblioteca de fuentes gratuitas para uso en web, actualmente recoge más de 800 familias de fuentes tipográficas.

Lo que empezó siendo un gran repositorio tipográfico para web, actualmente se ha convertido en un gran catálogo tipográfico que puedes utilizar tanto para web como para tus propios diseños digitales.

 

¿Cómo utilizar Google Fonts?

Si utilizas blogger, como pertenece a Google, tienes acceso directamente desde tu panel de personalización del blog.

Si utilizas WordPress y quieres utilizar una fuente que existe en Google Fonts, tendrás que importarlo de la siguiente manera:

Primero, al visitar Google Fonts, esto es lo que te vas a encontrar:

Google Fonts

 

Puedes probar a ver tu propio texto, solo tienes que pinchar en el texto prueba de cualquier fuente y modificarlo, y si pinchas en ‘Apply to all fonts’, verás el texto cambiado en todos los cuadros de texto, esto mola cuando dudas entre varias fuentes, así te haces mejor a la idea de cómo quedará.

Fuentes google

Cuando hayas localizado la fuente que te guste sólo has de pinchar en el +, puedes elegir varias (así te facilitará la comparación).

Una vez que tienes la fuente seleccionada, en la parte inferior de la página te aparecerá esta pestaña con el número de fuentes que has elegido:

Si pinchas en la rayita, se desplegará mostrándote esto:

Importar google font

Asegúrate de pinchar en @import y ahí verás un código que tendrás que añadir a tu archivo css.

Seleccionas sólo la línea @import url(‘…’);  y la copias en la primera línea de tu archivo style.css.

Ya tienes importada la familia tipográfica, ahora sólo te quedará utilizarla para dar estilo a tus textos, para eso, en css, para la clase que quieras darle ese estilo tendrás que utilizar las reglas CSS que te da esta pantalla.

Por ejemplo, si quieres utilizar esta tipografía para un título en h2 le pondrás

h2{

font-family: ‘Merriweather’, serif;

}

Y así con cualquier otro tipo de texto.

 

Pero ¿y si quieres descargarte la fuente para hacer un logo por ejemplo?

 

Descargar fuentes de Google Fonts

Igual que antes, seleccionas las fuentes que quieras descargar, y cuando despliegues la pestaña, verás esto:

Descargar fuentes google fonts

Si te fijas, en la parte de arriba a la derecha tienes el icono de una flechita con una raya debajo, le das y comenzará la descarga a tu equipo.

Ya solo tienes que instalarlas y voilà, ya puedes utilizarlas para lo que quieras.

 

Descargar fuentes Google Fonts

Guardar

Guardar

Guardar

Puedes compartir el post en:

Archivado en:Blogging, Diseño

Deja una respuesta Cancelar la respuesta

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

Responsable » Esther Calvo.
Finalidad » Moderación de los comentarios en el blog.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores de Webempresa. Ver política de privacidad de Webempresa.
Derechos » Podrás ejercer tus derechos de Acceso, Rectificación, Limitación o Suprimir tus datos enviando un email a esther@jadewebs.com.

Un poquito sobre mí

¡Hola! Soy Esther, adicta a la tecnología y al buen diseño en general.

Soy diseñadora web y a través de este blog quiero ayudarte a dar el paso hacia el blogging profesional y convertir tu hobby en un modo de vida. Leer más…

El mejor hosting en España

servidores wordpress
Copyright © 2020 · JadeWebs · Contactar

Política de Privacidad | Política de Cookies | Aviso legal
Esta web utiliza cookies para asegurar la mejor experiencia al usuario. AceptoLeer política de cookies