Carregue e importe fontes de código aberto CSS específicas em seus projetos usando o Node Package Manager ...
A importação de fontes agora facilitou ... importar e carregar apenas as variições de fontes necessárias para suas fontes.
Como exemplo: meu tema CSS funciona com a fonte Roboto com variações 300.400.500.700. Tudo o que preciso fazer é importar essa fonte específica e suas variações.
Este pacote faz exatamente isso para você.
Este serviço foi inspirado no projeto Typefaces de Kyle Mathews, no qual todas as variações das fontes foram carregadas juntas, o que causou redução no desempenho devido a grandes fontes baixadas.
Da maneira que você pode fazer o abaixo com as fontes do Google:.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />
Agora você pode fazer o mesmo com o NPM:
npm install --save font-face-roboto
Cada face de fonte de fonte vem com todos os arquivos de fonte necessários.
Para usar em seu projeto, adicione e importe-o em seu ponto de entrada:
import "typeface-roboto/300-400-500i-700.css";
Fazer o exposto importará a fonte Roboto com variações de 300Normal, 400Normal, 500italic e 700Normal.
O Typeface pressupõe que você esteja usando o WebPack com a configuração de carregadores para carregar arquivos CSS e Fonte (você pode usar o tipo de letra com outras configurações, mas o Webpack torna as coisas realmente realmente simples). Supondo que a configuração do seu WebPack seja configurada corretamente, você só precisa exigir o tipo de letra no arquivo de entrada do seu projeto.
Use junto com o WebPack para agrupar e injetar os arquivos necessários no projeto.
Ferramentas como Create-React-App e Gatsby trabalham fora da caixa junto com isso.
Sinta -se à vontade para usar em seus projetos de reação.
Suportes e contribuições para este projeto são muito apreciados !!!