¿Cómo usar Google Fonts con CSS?

Autor: | Última modificación: 4 de marzo de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Si estás comenzando a trabajar con CSS, te suena Google Fonts (o las tipografías libres). No es para menos, ya que esta herramienta se ha convertido en un elemento bastante útil para los desarrolladores web. Es por eso que hemos preparado este post para que sepas cómo puedes implementar Google Fonts con CSS para mejorar tu flujo de trabajo.

En general, el diseño de estilo y la aplicación de tipografías al momento de crear tu página web es algo sumamente importante que no deberías subestimar; puedes llegar a mejorar la experiencia de usuario de manera muy considerable si le prestas la atención suficiente a la maquetación y el diseño de todo lo que se verá en pantalla una vez que tu web sea publicada. Los estilos de letras y las tipografías son parte de esto, por supuesto.

¿Qué es Google Fonts?

Google Fonts es básicamente una enciclopedia de tipografías de código libre desarrollada por Google. Claro, no es la única de su tipo y podrás encontrar bastantes proyectos colaborativos de código abierto como Open Foundry o 36 Days of tipe, donde diseñadores comparten y crean distintos estilos tipográficos para uso público de la comunidad. También podrás encontrar diversas páginas en línea dedicadas a compartir tipografías de tipo libre como las famosas Dafont, Font Squirrel o Fontex. Por supuesto, Google Fonts entra en este grupo.

Recuerda que las tipografías libres utilizan licencias de código abierto (SIL Open Font, Apache), lo cual permite que puedas utilizarlas sin tener que comprarlas o atribuir derechos a sus diseñadores. En este punto, ya sabrás lo imprescindible que resulta esta herramienta para tu página web.

¿Cómo usar Google Fonts con CSS para tu página web?

Al momento de implementar Google Fonts en tu página web, ten en cuenta que debes poseer conocimientos básicos tanto de HTML como de CSS y que hay principalmente dos formas de añadir la fuente a tu página. En el primer caso, para poder añadir la tipografía que quieras debes seguir estos pasos:

  • Dirígete al sitio de Google Fonts, busca la fuente que deseas y selecciona el estilo que quieras.
  • Con la tipografía seleccionada, haz click en «Quick Use».
  • Copia el código de HTML estándar proporcionado por Google Fonts en la cabecera de tu página web, entre las etiquetas «header«. <head> aquí </head>.

<html>

<head>

<link rel= "stylesheet" type= "text/css" herf= "http.//fonts.googleapis.com/css

family=Tangerine>

<style>

body {

font-family: 'Tangerine', serif;

fint-size: 48px;

}

</style>

</head>

<body>

<div>Making the web Beautiful</div>

<body>

</html>

  • Integra la fuente en tu código CSS en la hoja de estilo: aplica la propiedad CSS font-family, tal y como ha salido de Google Fonts.

Como segunda opción, puedes añadir la tipografía mediante la etiqueta @import, para ello debes hacer lo siguiente:

  • Inserta el código que proporciona Google Fonts al principio de tu hoja de estilos CSS. (No olvides utilizar el @import).

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

*{

margin: 0;

padding: 0;

}

body{

font-family: 'Open Sans', sans-serif;

}

header{

background-color: #F9F8FC;

height: 316px;

}

  • Luego aplica la propiedad CSS font-family tal y como ha sido dada por Google Fonts.

h1{

font-family: 'Bangers', cursive;

}

Esta opción es especialmente útil para indexar tipografías en Wordpress, por ejemplo, ya que no debes acceder a <head> sino que haces la carga directamente por la CSS.

Ventajas de usar Google Fonts

Utilizar Google Fonts con CSS para la creación de tu página web tiene las siguientes ventajas:

  • Son muy fáciles de usar: esto implica que también son eficaces y rápidas. Te ahorrarán horas de trabajo frente al ordenador intentando sacar tipografías para tu web desde cero.
  • Son altamente compatibles: podrán visualizarse en la mayoría de formatos, dispositivos, lenguajes de programación y pantallas. Esta es una ventaja enorme ya que tendrás asegurado que quienes abran tu página web verán exactamente lo que tú quieres y no lleguen a generarse errores de formato en la vista de la página.
  • Para mayor eficiencia en tu flujo de trabajo, tendrás la opción de añadir tus tipografías más frecuentes a una lista de favoritos.
  • Google fonts te permite ver estadísticas del impacto de las fuentes en la velocidad de carga de tu página.

¿Quieres aprender más sobre CSS?

Ahora que sabes cómo usar Google Fonts con CSS para añadir tus fuentes favoritas, te ayudamos a dominar CSS y otras herramientasCon nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Inscríbete ahora!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!