Cómo usar diferentes fuentes en mi sitio web

Puede incluir fuentes de forma manual o por proveedores de fuentes.

1] Manualmente :

Si tiene el archivo .ttf con usted, puede incluirlos en css

@Perfil delantero {
Familia tipográfica: caslon;
src: url (ruta / a / caslon.ttf);
}
div {
Familia tipográfica: caslon;
}

2] Fuentes de Google (o cualquier proveedor de fuentes):

El fragmento anterior ya está escrito (en el navegador) para la mayoría de las fuentes de google. Todo lo que necesitamos hacer es incluir el archivo css, ya sea en html o @import en css o js

O por

@import url (https://fonts.googleapis.com/css?family=EB+Garamond);

El método preferido es mediante la etiqueta ya que permite que el navegador descargue el CSS simultáneamente, lo que resulta en un buen rendimiento, mientras que @import no lo hará.

Anuncio de uso de fuentes de Google:

  1. Todos están listos: solo necesita incluirlos.
  2. Compatibilidad del navegador: el contenido CSS que incluye no es el mismo en todas partes. Varía según el navegador y el sistema operativo por compatibilidad, por lo que no debe preocuparse.
  3. Almacenamiento en caché: algunas fuentes populares pueden estar ya en el caché del navegador si otros sitios incluyen la misma fuente CSS. Por lo tanto, no es necesario volver a atender una solicitud.
  4. Descarga más rápida: si utiliza el método manual anterior, los contenidos se descargarán de su servidor web. Pero en el caso de Google Fonts, entregan archivos a través de CDN, que es mucho más rápido ya que los servidores están geográficamente muy cerca del espectador.

Factor molesto:

  1. Será molesto durante el desarrollo, ya que debe esperar a que se descargue la fuente para cada actualización HARD ..

Por lo tanto, es mejor usar el método 1 durante el desarrollo y el método 2 para la implementación de producción.

Gracias por A2A

Andro Babu

ve a Google Fonts y encuentra qué fuente te gusta. después de eso, haga clic en el botón “uso rápido”.

después de hacer clic en él, se abre una nueva página, en esta página puede descargar la fuente o google le proporciona el código de 3 maneras

1) versión estándar (enlace)

2) versión de importación (@import)

3) versión js (script)

ponlo en tu código lo que quieras.

hay muchos sitios web de fuentes, pero todos te cobran por descargar la fuente.

y google lo proporciona de forma gratuita.

Haga la carpeta de fuentes -> descargue la fuente requerida -> genere la fuente de la ardilla de fuentes y los anuncios que se archivan en su carpeta de fuentes y luego en el archivo css agregue eso y luego agregue la fuente css a su mani css como sabiamente use una fuente diferente sabiamente … Para más Google it.

Hay fuentes de Google que le permiten incluirlas en el código y usarlas a través de CSS. Y hay muchas otras opciones, algunas de ellas son servicios pagos.