Fuentes autohospedadas
Si desea agrupar las fuentes utilizadas en su aplicación web, entonces Fontsource es una biblioteca que quizás desee consultar (enlace también en el apéndice al final de la página). Le permite instalar las fuentes que desea consumir, lo que significa que sus fuentes están alojadas por usted mismo y no requieren un CDN para cargar.
Instalación de cada fuente
Para instalar las fuentes que desea usar, simplemente ejecute el comando de instalación para cada variante. Los siguientes fragmentos de código muestran cómo se instalaría la fuente para este PWA.
npm install @fontsource/work-sans
En el punto de entrada de mi aplicación, tengo que consumir el paquete instalado importándolo. Esto me permite definir con precisión lo que necesito sin agregar gastos generales. Como las fuentes pueden tener un tamaño bastante grande, esta es una gran oportunidad para ahorrar bytes.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Finalmente, necesito configurar la familia de fuentes en mi CSS. Dependiendo de la biblioteca que esté utilizando (por ejemplo, Tailwind.css), este código puede verse un poco diferente para usted.
body {
font-family: "Work Sans", sans-serif;
}
Fuentes variables
Fontsource también ofrece una opción para instalar fuentes variables, lo que significa que tiene acceso a las últimas herramientas en lo que respecta a la carga de fuentes. Tenga en cuenta que no todas las fuentes están disponibles como variantes variables.
