Cargue e importe fuentes de código abierto CSS específicas en sus proyectos utilizando el administrador de paquetes de nodo ...
La importación de fuentes ahora facilitó ... Importar y cargar solo las vara de fuentes necesarias para sus fuentes.
Como ejemplo: mi tema CSS funciona con Font Roboto con variaciones 300,400,500,700. Todo lo que tengo que hacer es importar esa fuente específica y sus variaciones.
Este paquete hace exactamente eso por ti.
Este servicio se inspiró en el proyecto de letra de Kyle Mathews en el que todas las variaciones de fuentes se cargaron juntas, lo que causó una reducción en el rendimiento debido a grandes fuentes descargadas.
Justo la forma en que puede hacer lo siguiente con Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />
Ahora puedes hacer lo mismo con NPM:
npm install --save font-face-roboto
Cada fuente de fuentes viene incluido con todos los archivos de fuentes necesarios.
Para usar en su proyecto, agrégalo e importe en su punto de entrada:
import "typeface-roboto/300-400-500i-700.css";
Hacer lo anterior importará la fuente roboto con variaciones de 300 normales, 400 normales, 500itales y 700normales solamente.
Tipoface supone que está utilizando Webpack con la configuración de los cargadores para cargar CSS y archivos de fuentes (puede usar Tipo de tipo Suponiendo que su configuración de Webpack se configure correctamente, solo necesita requerir el tipo de letra en el archivo de entrada para su proyecto.
Usar junto con Webpack para agrupar e inyectar los archivos necesarios en el proyecto.
Herramientas como CREATE-REACT-APP y Gatsby funcionan fuera de la caja junto con esto.
Siéntase libre de usar en sus proyectos React.
¡Los apoyos y contribuciones a este proyecto son muy apreciados!