Importar Google Fonts en CSS

1. Uso de la regla @import para importar la Google Fonts en CSS
2. Uso de la etiqueta link para importar las Google Fonts en CSS

En este tutorial, aprenderemos algunos métodos para importar Google Fonts en CSS.

Uso de la regla @import para importar la Google Fonts en CSS

La regla CSS @import se utiliza para importar otra hoja de estilo en una hoja de estilo. Podemos especificar la hoja de estilo en la función url() y como una cadena.

También podemos usar la regla @import para importar fuentes externas en CSS. Por ejemplo, podemos usar las Google Fonts en la función url() y establecer la fuente con la propiedad font-family.

Google Fonts tiene una variedad de fuentes entre las que podemos elegir. Podemos obtener la URL de la fuente en el sitio web.

Por ejemplo, vaya al sitio web de Google Fonts y elija la fuente Roboto. Luego, haga clic en el botón de radio @import de la barra lateral a la derecha.

A continuación, copie la URL entre la etiqueta style. Del mismo modo, en HTML, cree las etiquetas h1 y p.

En CSS, escriba la regla @import en la parte superior de la hoja de estilo y pegue la URL de la fuente Roboto dentro de la función url(). Seleccione la fuente Outfit y obtenga la URL.

A continuación, seleccione la etiqueta h1 y utilice la propiedad font-family para establecer la fuente Outfit. Asimismo, establezca la fuente Roboto en el párrafo.

De esta forma, podemos importar Google Fonts en una hoja de estilo.

Sin embargo, se desaconseja el uso de la regla @import para importar Google Fonts. Es porque las fuentes no aparecerán en la página web a menos que se obtenga el archivo.

Código de ejemplo:

<h1> Title </h1>
<p>This is Roboto font.</p>

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

h1 {
 font-family: 'Outfit', sans-serif;
}

p {
 font-family: 'Roboto', sans-serif;
}

Uso de la etiqueta link para importar las Google Fonts en CSS

La etiqueta link es la forma más adecuada de importar Google Fonts en HTML. Se recomienda la etiqueta link porque carga previamente la fuente.

Podemos especificar la URL de la fuente en el atributo href de la etiqueta link. Podemos generar todas las etiquetas link desde el sitio web Google Fonts.

Por ejemplo, vaya al sitio web de Google Fonts y elija la fuente Comforter Brush. Seleccione el botón de radio link y copie las etiquetas de link generadas.

Luego, pegue las etiquetas en HTML y cree una etiqueta p y escriba algo de texto dentro de ella. A continuación, seleccione la etiqueta p en CSS y establezca la propiedad font-family en Comforter Brush.

Hemos utilizado preconnect para el atributo rel en las dos primeras etiquetas link. Le permite al navegador saber que el usuario necesita los recursos en el atributo href para que el navegador pueda iniciar una conexión preventiva a los recursos.

De esta forma, podemos utilizar la etiqueta link para importar las Google Fonts en CSS.

Código de ejemplo:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}