Cómo importar la fuente web de Google en CSS?
En el desarrollo web, el uso correcto del estilo de fuente proporciona un aspecto atractivo para la aplicación. Estos estilos de fuentes dan pistas visuales sobre la orden de lectura del documento. Por ejemplo, el estilo de fuente del encabezado del documento debe ser audaz y significativo de los demás. El estilo también ayuda a distinguir contenido importante de los demás.
Los resultados de aprendizaje de este artículo son:
- ¿Qué son las fuentes web de Google??
- Cómo importar Google Fonts en HTML?
- Cómo utilizar las fuentes de Google en el archivo CSS?
¿Qué son las fuentes web de Google??
Google Web Font es una biblioteca de código abierto que contiene cientos de estilos de fuentes o familias. También proporciona API que nos ayudan a usar fuentes web con Android y CSS. Las fuentes de Google son mucho más ligeras que otras bibliotecas de fuentes y están disponibles gratis para el uso de negocios. Estos son más fáciles de implementar en cualquier sitio web.
Por defecto, CSS ofrece estilos de fuentes de fantasía, serif, sans serif, cursiva y monoespacio. Google Fonts se puede utilizar si desea usar otros estilos de fuentes.
Cómo importar Google Fonts en HTML?
Para usar Google Fonts en una página HTML, realice los siguientes pasos.
Paso 1: seleccione la familia de fuentes
Primero, abra el sitio web oficial de Google Fonts y seleccione la fuente que desee. Por ejemplo, hemos elegido el "Langosta dos" Familia tipográfica:
Paso 2: seleccione los estilos
A continuación, desplácese hacia abajo para ver la lista de estilos. Agrégalos a su colección haciendo clic en el "+" firmar:
Paso 3: Ver familias seleccionadas
Para ver las familias seleccionadas, haga clic en el icono resaltado a continuación:
Paso 4: Copie el enlace a la incrustación en el HTML
Después de eso, desplácese hacia abajo y copie el enlace de la familia de fuentes utilizando lo resaltado "CopiarIcono:
Cómo utilizar las fuentes de Google en el archivo CSS?
Para usar la copia de Google Fonts en CSS para el estilo, revise los ejemplos dados.
Ejemplo 1
Incluir un " "El mejor sitio web de tutorial" Para importar las fuentes de Google, pegue el código copiado en el ""Etiqueta del archivo HTML: Elemento de estilo "P" Las siguientes propiedades de CSS explicadas se aplican al HTML " La imagen muestra que la familia de fuentes se aplica con éxito: Ejemplo 2 Tomemos otro ejemplo para importar el "Nerko uno"Fuente de Google. Para este propósito, vuelva a pegar el código para la URL de fuentes de Google "Nerko One" en el "" elemento: Elemento de estilo "P" El "Familia tipográfica","pescado", y "tamaño de fuente"Las propiedades se aplican al HTML" Producción Le hemos enseñado cómo importar las fuentes web de Google en el archivo CSS. Conclusión Para importar Google Fonts en CSS, primero visite el sitio web oficial de Google Fonts y seleccione el estilo de fuentes. Luego, copie el código que contiene el "@importar"Palabra clave y péguela en el archivo CSS o en el"El elemento del archivo HTML. Este estudio ha demostrado el procedimiento completo de importar las fuentes de Google en un archivo CSS. @Import URL ('https: // fuentes.Googleapis.com/css2?familia = langosta+dos: ital@1 & display = swap ');
pag
Font-Family: 'Lobster Two', cursiva;
Text-Align: Center;
tamaño de fuente: 45px;
Color: RGBA (64, 3, 162, 0.8);
@Import URL ('https: // fuentes.Googleapis.com/css2?Family = Nerko+One & Family = Oswald: wght@500 & family = pacifico & display = swap ');
pag
Font-Family: 'Nerko One', cursiva;
Font-peso: 300;
tamaño de fuente: 30px;