No podemos usar todas las fuentes (fuentes no estándar) en nuestros sitios web porque no todas las fuentes son compatibles con todos los sistemas. Para lidiar con este problema, es decir, usar cualquier fuente de nuestra elección, podemos seguir estos enfoques.
Enfoque 1: usar CSS Font Face: en esto, podemos definir una nueva familia de fuentes y darle un nombre de nuestra elección. Solo tenemos que subir el archivo de fuente junto con nuestro código fuente al servidor. Puede consultar este artículo para saber más sobre @font-face. Mientras usa @font-face, primero asigne a esto un nombre y la ruta del archivo de fuente, además de estos dos, también se pueden agregar otros parámetros. Para dar la ruta del archivo de fuente, primero tenemos que descargarlo en nuestro sistema, podemos descargar nuestro archivo de fuente deseado desde «font squirrel» o cualquier otro sitio web, y luego tenemos que dar la ruta de este archivo de fuente en nuestro «src ”. Siempre que subamos nuestro sitio web al servidor, también tenemos que cargar el archivo de fuente y dar su ruta en «src» de @font-face. Al usar esto, podemos definir una nueva familia de fuentes y usarla en nuestro sitio web y se mostrará en nuestro sitio web incluso si los usuarios no tienen esta fuente en su sistema.
Sintaxis:
@font-face {
font-family: Name_of_font-family;
src: url(path of fontFile);
}
Nota: Este ejemplo no producirá el mismo resultado en otro sistema, ya que está usando » src: url(Lobster_1.3.otf) «.
Requisitos previos: para usar «Lobster_1.3.otf» en su sistema, siga estos pasos:
Paso 1: Vaya a Font Squirrel, busque «Langosta» y descárguelo haciendo clic en descargar OTF
Paso 2: después de la descarga, indique la ruta del archivo de fuente junto con su extensión en el src de @font-face.
Para cualquier otra fuente, también puede seguir los mismos pasos, los archivos de fuentes pueden tener diferentes extensiones, como .ttf, .otf, .woff, .woff2, .svg, .eot, por lo que en diferentes casos proporcione la extensión correspondiente.
Ejemplo: este ejemplo usará la fuente CSS para agregar una fuente no estándar a un sitio web:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Font Face CSS</title>
<style>
@font-face {
/* Give a name for this font family */
font-family: f1;
src: url(Lobster_1.3.otf);
}
h1 {
font-family: f1;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
</body>
</html>
Producción:
Aquí, cuando se cargue esta página web, se usará la familia de fuentes que habíamos creado tomándola de la ruta que habíamos proporcionado en src. Como habíamos proporcionado la nueva familia de fuentes solo a la etiqueta h1, podemos ver que solo h1 ha cambiado.
Enfoque 2: uso de fuentes de Google
Podemos usar las fuentes de Google para esto, en este enfoque solo tenemos que importar nuestra familia de fuentes deseada desde el sitio web de la fuente de Google a nuestro archivo HTML. Esto se puede hacer de algunas maneras que se analizan en este artículo. Después de importarlo, podemos usarlo en nuestro estilo, de esta manera podemos usar cualquier fuente en nuestro sitio web y se mostrará al final del usuario incluso si no tienen esa fuente en su sistema.
Sintaxis:
<link href="link of font family" rel="stylesheet">
Ejemplo: este ejemplo utilizará Google Fonts para agregar una fuente no estándar a un sitio web:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Using Google Font</title>
<!-- import font -->
<link href=
"https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Mono&family=Ubuntu:wght@300&display=swap"
rel="stylesheet">
<style>
h1 {
font-family: 'Lobster';
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
</body>
</html>
Producción:
Aquí, cuando se carga esta página web, se usa la fuente del enlace que habíamos proporcionado en ese encabezado de nuestro HTML. Como habíamos proporcionado la familia de fuentes importada solo a la etiqueta h1, podemos ver que solo h1 ha cambiado.
Usando estos dos enfoques, podemos agregar cualquier fuente a nuestro sitio web.
Publicación traducida automáticamente
Artículo escrito por pushpamkjha14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA