Al diseñar páginas web, los desarrolladores usan diferentes fuentes según lo que representa el texto y qué fuentes se adaptan mejor. Cada sistema viene con algunas fuentes preinstaladas que se denominan fuentes del sistema. Dado que estos son limitados, uno puede encontrarse con la necesidad de usar una fuente diferente a las preinstaladas. En este artículo, discutiremos cómo usar fuentes web en CSS. El uso de fuentes web permite a los desarrolladores usar fuentes sin tener que descargarlas o instalarlas en su sistema.
Enfoque 1: si desea usar una fuente que está disponible a través de CDN (por ejemplo , las fuentes de Google ), simplemente puede seleccionar la familia de fuentes deseada y usar la etiqueta <link> o la regla @import .
Ejemplo: supongamos que deseamos usar la familia de fuentes «Revisada» de las fuentes de Google, entonces nuestro código HTML debería verse como se muestra a continuación.
HTML
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<!-- This line defines the css styles file to be used -->
<link rel="stylesheet" href="css/styles.css" />
<!-- This is the link tag that needs to be
defined so that we can use the font -->
<link href=
"https://fonts.googleapis.com/css2?family=Redressed&display=swap"
rel="stylesheet"/>
<style>
#mainh1 {
color: green;
font-family: "Redressed", cursive;
}
</style>
</head>
<body>
<h1 id="mainh1">GeeksforGeeks</h1>
</body>
</html>
Producción:
Aquí, también podemos usar la regla @import en nuestro CSS. Entonces el archivo CSS se vería así.
@importar URL(‘https://fonts.googleapis.com/css2?family=Redressed&display=swap’);
#mainh1{
color: verde;
familia tipográfica: ‘Redressed’, cursiva;
}
Nota: ahora no requerimos la etiqueta <link> para la fuente en nuestro HTML. Obtendremos el mismo resultado en ambos métodos.
Enfoque 2: después de encontrar la fuente deseada, también podemos usar @font-face al comienzo de nuestro archivo CSS. Supongamos que tenemos la URL de la fuente y queremos usarla en nuestro proyecto, entonces podemos agregar el siguiente bloque de código en nuestro CSS:
@font-face {
font-family: "exampleFont";
src: fontUrl("exampleFont.woff");
}
Y para usar la fuente, simplemente podemos definir la sección de familia de fuentes para todos los elementos que queremos que se muestren en esta fuente.
Ejemplo: Ahora usaremos la misma fuente, es decir, “Redressed” pero usando @font-face . Nuestro código HTML se verá así:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: exampleFont;
src: url(Redressed-Regular.ttf);
}
#mainh1 {
color: green;
font-family: exampleFont;
}
</style>
</head>
<body>
<h1 id="mainh1">GeeksforGeeks</h1>
</body>
</html>
Nota: debe definir la ruta de la fuente en relación con su ubicación dentro de su servidor web. Aquí hemos mantenido el archivo de fuente en el mismo directorio que nuestro código HTML, por lo que el nombre del archivo de fuente se escribe directamente.
Producción:
Publicación traducida automáticamente
Artículo escrito por greenblade29 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA