Como usar Google Fonts en nuestro sitio Web

Para quienes realizan diseño web, el límite histórico que imponía el uso de tipografías (web safe fonts) fue superado con la llegada de CSS y @font-face. En el 2010 se lanza el servicio online Google Web fonts que luego sería bautizado Google Fonts. Hoy en día estas fuentes se encuentran en millones de sitios Web y su uso sigue creciendo.

¿Qué es Google Fonts? Es un directorio online que cuenta con más de 800 tipografías listas para usar en nuestros proyectos.  Es un sistema gratuito y se mantiene actualizado, agregando nuevas características y fuentes, que están clasificadas por nombre de la familia tipográfica y por categoría.

Google Fonts

 

Tendremos la posibilidad de utilizar las fuentes online (sin necesidad de descargarlas), pero también podremos ir por la alternativa de guardarlas en nuestro equipo, si lo deseamos. Cada tipografía permite tener una vista previa de como luce y podremos acceder a las variantes Light, Regular, Semi-bold y Bold en las familias que esté disponible.

Cómo agregar Google fonts a nuestro proyecto Web

Si optamos por usar Google Fonts de manera online, ingresamos en https://fonts.google.com. Vamos a la tipografía elegida, tocamos sobre el icono + que está en la parte superior derecha de la fuente y esto la agregará entre las fuentes que tenemos seleccionadas (aparecerá en un popup ubicado en la parte inferior derecha de la pantalla). Allí veremos todas las familias que agreguemos.

Google Fonts

En ese mismo espacio tendremos las opciones de como colocar la fuente en nuestro proyecto. Podremos optar por  la manera estándar y de esa manera, copiamos el link en la cabecera de nuestro documento HTML (en el <head>) y la usamos con la regla font-family en nuestro CSS con el nombre de familia indicado en el código que nos ofrece Google.

Si prestamos atención, esta misma ventana nos muestra el tiempo de carga. Que irá creciendo a medida que agreguemos más fuentes, por lo cual es recomendable no abusar de la cantidad de fuentes que incluimos, si deseamos que la performance de nuestro sitio sea óptima.

En la parte superior derecha de esta ventana también veremos la opción de descarga de la fuente.

Una de las grandes ventajas de Google Fonts es que no debemos preocuparnos por convertir las fuentes según el sistema del usuario. Este servicio se ocupa de ofrecer la mejor versión disponible de la fuente, según las características del navegador que está utilizando el usuario.

Si tenemos dudas sobre el tipo de licencia, la compatibilidad y la privacidad que ofrece este servicios, podemos ingresar en el documento Frequently Asked Questions de Google Fonts.

 

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.