Importa fuentes de Google Fonts en CSS (con @Import)

Hoy veremos una forma de importar fuentes de Google Fonts con la regla @import de CSS. De esta forma, podremos utilizar fuentes tipográficas de esta librería de Google a través de la hoja de estilos de nuestro sitio web.

Si te acuerdas, en el anterior vídeo vimos como usar las fuentes de Google fonts de manera «tradicional». Es decir, utilizamos la etiqueta <link> de HTML. En este caso, en vez de utilizar una etiqueta HTML, utilizaremos «el poder del CSS».

Como veremos a continuación, también podemos utilizar la etiqueta <style> de HTML para utilizar estas tipografías. Pero en este tutorial, lo haremos con CSS (con la regla import).

De igual forma, esta también es una manera muy sencilla de utilizar fuentes tipográficas en nuestros proyectos ¡Y de forma completamente gratis!

Así que, sin más rollo, vamos al lío.

Usar Google Fonts con @import de CSS

Aquí tienes el tutorial en vídeo, donde lo explico paso a paso.

Lo primero que haremos será ir a la página oficial de Google fonts y buscar la sección de Fonts (fuentes :D).

Cuando estemos dentro del apartado Fonts, podremos usar el buscador para encontrar la fuente que queramos.

Para hacer este tutorial, vamos a utilizar la fuente de Skranji que mola mucho y además, tiene los dos estilos que necesitamos para hacer el ejemplo.

Cuando estemos dentro de la fuente seleccionada, nos dirigiremos a la parte inferior y buscaremos la sección de Styles (estilos).

En este caso, seleccionaremos los dos únicos estilos de esta fuente.

Seleccionaremos el estilo de Regular 400 para los párrafos y el Bold de 700 para los títulos y subtítulos.

Aquí puedes agregar los estilos que tu quieras. Por ejemplo, si la fuente que has seleccionado tiene un estilo Light para tener una tipografía muy fina o un estilo Black, para obtener una fuente gruesa.

Recuerda que cuantos más estilos y fuentes agreguemos, más tardará en cargar la página.

Importar la fuente en CSS

Ahora nos dirigiremos al menú principal (arriba) y haremos clic en el último icono (lado superior derecho).

Cuando le des clic al icono, aparecerá un menú lateral con las fuentes y estilos que hayamos seleccionado (puedes agregar y quitar fuentes como quieras).

Y un poco más abajo saldrá el apartado de Use on the web que te explica como puedes utilizar o importar las fuentes en tu proyecto.

Este es el mismo apartado que vímos en el anterior vídeo, pero en vez de utilizar <link> marcaremos la opción de @import.

Una vez seleccionada la opción de @import copiaremos el código que aparece inmediatamente debajo, en el recuadro.

Por ejemplo, en este caso, el código que he de copiar es el siguiente:

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

Una vez copiado el código (la regla @import rodeada de la etiqueta style, apertura y cierre) iremos a nuestra hoja de estilos, de nuestro sitio web y pegaremos el código.

¡Pero ojo! En este caso, no hará falta las etiquetas <style> y </style> porque son etiquetas HTML y nosotros usaremos la regla @import directamente en la hoja de estilos. Así que el código que debemos tener en nuestra hoja de estilos ser algo así:

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

Si te fijas, es lo mismo, pero sin las etiquetas <style>.

MUY IMPORTANTE pegar al principio de nuestra hoja de estilos la regla @import, es decir, el código que nos proporcionan. Si no, es posible que no te funcione.

Una vez hemos pegado el código ya podremos utilizar la fuente, como lo haríamos normalmente en CSS. Veamos un ejemplo donde utilizaremos la fuente Skranji y los estilos regular 400 para los párrafos <p> y bold 700 para los títulos y subtítulos.

h1{
  font-family: 'Skranji', cursive;
  font-weight: 700;
}

p{
  font-family: 'Skranji', cursive;
  font-weight: 400;
}

Y de esta manera tan simple ya tendríamos la fuente cambiada en los elementos h1 y en los párrafos, con sus respectivos estilos.

No me voy a enrollar más porque este paso es exactamente igual al que vimos en el anterior tutorial.

Como has podido comprobar, esta es otra manera de usar tipografías del directorio de fuentes de Google. También es muy fácil de implementar.

Espero que te haya salido todo a la primera, es un proceso muy simple. Si tienes alguna duda o no te sale algo, déjamelo en los comentarios y te responderé.