Muy Buenas! Estoy pensando utilizar una fuente de texto distinta a la primera que establecí. Es decir, un parrafo que tenga esta fuente, y el otro parrafo otra fuente. Las fuentes las importaría con el link que me da Google Fonts. Gracias!!!
2 respuestas
Google Fonts te da básicamente dos formas de importar una fuente:
- Con etiquetas
<link>
, que usualmente van en el encabezado de tu archivo HTML o - Con sentencias
@import
, que van en tu CSS.
Acá estoy dejando un ejemplo que hice mezclando las dos. Para la fuente Tintillium Web estoy usando una sentencia @import
y para la fuente Lexend Peta estoy usando etiquetas <link>
en el HTML.
Una vez has colocado las fuentes, puedes escribir CSS que haga uso de dichas fuentes. En el ejemplo, creo dos clases, valiéndome del nombre de las fuentes. Una clase tintillium
y una clase lexend
. Finalmente creo dos párrafos, cada uno utilizando una de las clases mencionadas y, por tanto, las distintas fuentes que he cargado.
Un tercer párrafo usa la fuente default del navegador, pues no tiene clases asociadas y no he definido ninguna fuente para los elementos superiores.
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap');
.tintillium {
font-family: 'Titillium Web', sans-serif;
}
.lexend {
font-family: 'Lexend Peta', sans-serif;
}
<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=Lexend+Peta:wght@700&display=swap" rel="stylesheet">
<p class="tintillium">Este texto usa Tintillium Web</p>
<p class="lexend">Y este texto usa Lexend Peta</p>
<p>Ambas <a href="https://fonts.google.com/">fuentes de Google</a></p>
He dejado el ejemplo en un snippet para que puedas probarlo aquí mismo en la respuesta haciendo clic en el botón Ejecutar.
En un proyecto de la vida real, probablemente tus clases o los selectores dónde decidas aplicarlas no tengan el nombre de la fuente, eso es algo que ya depende de ti. Podrías tener clases como .vistosa
o .titulo
, etc.
Acá he usado los nombres de las fuentes a falta de más imaginación y para que quedara clara su intención.
En la vida real tampoco hay necesidad de mezclar <link>
s con @import
s, usa el que más te convenga. Además, google te da un único link/import con todas las fuentes que quieras utilizar en tu página.
hay dos formas posibles de importar e implementar distintas fuentes en tu web...
- primera:
Copiar el link que te da google fonts en head de tu html p.ej:
<!DOCTYPE html>
<html lang="en">
<head>
<!--otros imports-->
<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=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
Para implementar la fuente distinta en el párrafo que quieres podrias usar un class name que asigne esa fuente al párrafo actual p.ej:
.sans {
font-family: 'Open Sans', sans-serif;
}
- segunda:
Utilizar el @import que te da el mismo google fonts como segunda opcion y agregarlo en un archivo css global de la siguiente forma:
/* Esto al comienzo de tu archivo global.css (o como lo hayas nombrado) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
Finalmente de igual forma crear una clase que asigne esa fuente al párrafo que deseas:
.sans {
font-family: 'Open Sans', sans-serif;
}