JADE webs

Diseño web con Wordpress

  • Hosting
  • WordPress
  • Blogging
  • Diseño
  • Fotografía
  • SEO
  • Copywriting

Descargar fuentes de Google Fonts

07/08/2017 por Esther Deja 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:

Publicado 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.

Bienvenid@!

¡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…

Copyright © 2020 · JadeWebs · Contactar

Política de Privacidad | Política de Cookies | Aviso legal
Esta página utiliza cookies para proporcionar una experiencia mejor al recordar tus preferencias en visitas posteriores. Haciendo clic en 'Aceptar todas', aceptas el uso de todas las cookies. No obstante, puedes visitar 'Ajustes' para personalizar este consentimiento.
AjustesAceptar todo
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDuraciónDescripción
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
GUARDAR Y ACEPTAR