Página Inicial>Recursos de construção de sites>Baixar fonte
Baixar

O projeto TypeFaces agora está obsoleto.

O @DecliningLotus criou o Fontsource, que fornece a mesma funcionalidade que o tipo de letra, mas com liberações automatizadas e suporte mais rico para importar pesos, estilos ou subconjuntos de idiomas específicos.

Para começar a usar o FontSource, substitua seu package.json qualquer instância de "typeface- " com "@fontsource/ ".

Em seguida, altere as importações de EG "importar 'typeface-roboto'" para "importar '@fontsource/roboto/latin.css'".

Os pacotes de tipo de letra continuarão funcionando indefinidamente, para que não sejam necessárias alterações imediatas.

Tipo de letra

Pacotes NPM para tipos de letra de código aberto-facilitando o webfonts auto-hospedeiros.

https://www.bricolage.io/typefaces-easestway-to-self-host-fonts/

Por que

  • A auto-hospedagem é significativamente mais rápida . Carregar um tipo de letra do Google Fontes ou outro serviço de fonte hospedada adiciona uma solicitação de rede extra (bloqueando) . Nos meus testes, achei que a substituição do Google Fontes por uma fonte auto-hospedada pode melhorar o SpeedIndex de um site em ~ 300 milissegundos na área de trabalho e mais de 1 segundos no 3G. Isso é um grande negócio.
  • Suas fontes carregam offline . É irritante começar a trabalhar em um projeto da web no trem ou no avião e ver sua interface estragada porque você não pode acessar as fontes do Google. Lembro -me de uma vez estar nessa situação e fazer todo o possível para evitar recarregar um projeto, pois sabia que perderia as fontes e seria forçado a parar de trabalhar.
  • Vá além do Google Fontes . Alguns dos meus tipos de letra favoritos não estão no Google Fontes, como Clear Sans, Cooper Hewitt e Aleo.
  • Todas as dependências da Web (site | APP) devem ser gerenciadas através do NPM sempre que possível. É da maneira moderna.

O que

Cada pacote de tipo de letra é enviado com todos os arquivos de fonte e CSS necessários para se auto-hospedar um tipo de letra de código aberto.

Todas as fontes do Google foram adicionadas, bem como uma lista pequena, mas crescente de outras fontes de código aberto. Abra um problema se você quiser uma fonte adicionada!

Como

Não poderia ser mais fácil. É assim que você acrescentaria sans. 

 npm install --save typeface-open-sans

Então, no arquivo de entrada do seu aplicativo ou site. 

 require ( "typeface-open-sans" )

E é isso! Agora você está se auto-hospedar sem sans!

Deve levar <5 minutos para trocar as fontes do Google.

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.

Muitas ferramentas construídas com o WebPack, como Gatsby e Create React App, já estão configuradas para funcionar com o tipo de letra. Gatsby por padrão também incorpora seu CSS no seu <head> para um carregamento ainda mais rápido.

Se você não estiver usando o WebPack ou uma ferramenta equivalente que permita que você exija CSS, precisará integrar manualmente os arquivos index.css e font do pacote no seu sistema de compilação.

Alternativas sem webpack

  • Para usuários de Ember, há um addon https://github.com/jeffjewiss/ember-typeface

Adicionando outras fontes

A maneira mais fácil de descobrir se o seu tipo de letra favorito é suportado é pesquisar no NPM ou no diretório de pacotes neste repositório.

Eu adoraria ver todas as fontes de código aberto no NPM! Abra um problema se falta um tipo de letra favorito. Publiquei programaticamente todas as fontes do Google Fontes e estou planejando fazer o mesmo com fontes hospedadas no FontsQuirrel através de sua API.

Outras idéias para explorar

  • Adicione a versão subconjunto de todas as fontes.
  • Inicialmente, acabei de adicionar suporte para a versão latina das fontes. Adoraria ouvir idéias sobre como apoiar outros idiomas. Talvez arquivos CSS adicionais, por exemplo require('open-sans/greek.css') ?
  • Ajuda do CSS de Fallback de navio - Descobrir seu CSS de Fallback não é particularmente fácil. Talvez haja uma maneira de automatizar isso. Por exemplo, se você estiver usando o Typeface X em Fontsize Y com a fonte de fallback Z, aqui está uma função para gerar o CSS de fallback.
  • Explore otimizações futer para carregar fontes. https://www.zachleat.com/web/comprensive webfonts/ tem uma longa lista. A maioria requer scripts dolorosos por projeto. E se as melhores estratégias pudessem ser automatizadas?
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos