Cómo usar las fuentes de Google en tus páginas web

Google Fonts es un servicio gratuito que ofrece Google y que permite acceder a miles de fuentes. Todas las fuentes disponibles se encuentran bajo licencias de código abierto, lo que significa que su uso es gratuito tanto para proyectos comerciales como no comerciales.

Empezando

En este artículo se explicará el uso de fuentes de Google en una página web. A continuación se muestra el aspecto actual de una página web estándar:

Y aquí está el código HTML estándar:

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  titleMy web page/title/headbody  h1Welcome to my website/h1/body/html

Bastante aburrido, ¿no? Vamos a animarlo un poco con una fuente mejor.

Elección de fuentes

Ahora es el momento de elegir nuestras fuentes. Dirígete a fonts.google.com y selecciona una fuente que te guste presionando el pequeño botón ( + ) (más). Voy a usar Karla. Una vez que hayas elegido tu fuente, expande el cajón en la parte inferior de la página.

Hay dos formas de importar la fuente para usarla. Para el primer método, copie el código en el cuadro de código debajo de la Standardetiqueta. Ahora, vuelva a su marcado y agregue el código copiado y una etiqueta de estilo al encabezado del documento de esta manera.

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  titleMy web page/title  link href="https://fonts.googleapis.com/css?family=Karladisplay=swap" rel="stylesheet"/headbody  h1Welcome to my website/h1/body/html

Notarás en el ejemplo de URL anterior que Google Fonts ahora admite la propiedad font-display.

Si ya tiene una hoja de estilos CSS separada, copie el código debajo de la @importetiqueta y agréguelo en la parte superior de su hoja de estilos de la siguiente manera.

@import url('https://fonts.googleapis.com/css?family=Karladisplay=swap');.element {  /* ... */}

Uso de las fuentes

Hemos importado nuestras fuentes, ahora es momento de usarlas. Configuremos bodynuestro código HTML para que use Karla, de la siguiente manera:

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  titleMy web page/title  link href="https://fonts.googleapis.com/css?family=Karladisplay=swap" rel="stylesheet"  style      body {        font-family: 'Karla', sans-serif;      }  /style/headbody  h1Welcome to my website/h1/body/html

Ahora, si echamos un vistazo a nuestra página web, se ve así:

¡Eso se ve mucho mejor!

✨ ¡Eso fue fácil, verdad? Ahora puedes hacer que tus páginas web luzcan más bonitas con el alojamiento de fuentes gratuito que ofrece Google Fonts! ¡Gracias por leer!