O Fontsource é uma solução para auto-hospedar fontes de código aberto utilizando pacotes NPM empacotados. Cada fonte é disponibilizada como um módulo independente, facilitando a integração em projetos web.

Estrutura do Repositório

O repositório do Fontsource segue uma organização modular. A esrtutura principal inclui diretórios para pacotes de fontes, scripts de automação e arquivos de configuração.

raiz-do-projeto/
├── modulo-fontes/
│   ├── fonte-customizada/
│   │   ├── documentacao.md
│   │   ├── metadados.json
│   │   ├── regras-estilo.css
│   │   └── ...
│   ├── fonte-alternativa/
│   │   └── ...
│   └── ...
├── utilitarios/
│   ├── gerar-bundles.js
│   ├── sincronizar-versoes.js
│   └── ...
├── ignorar-git.txt
├── ignorar-npm.txt
├── normas-comportamento.md
├── guia-contribuicao.md
├── licenca.txt
├── leia-me.md
└── metadados.json

Descrição dos componentes:

• modulo-fontes/: Armazena todos os pacotes de fontes disponíveis.
• utilitarios/: Contém scripts para processamento e atualização das fontes.
• Arquivos auxiliares para controle de versão e publicação no NPM.

Ponto de Entrada para Uso

Para utilizar uma fonte, basta importtar o arquivo CSS principal do pacote correspondente. Por exemplo, no pacote fonte-customizada, o arquivo regras-estilo.css define as faces tipográficas.

Conteúdo exemplar de modulo-fontes/fonte-customizada/regras-estilo.css:

@font-face {
  font-family: 'Minha Tipografia';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./recursos/minha-tipografia-latin-400.woff2') format('woff2');
}

Este trecho configura o carregamento da fonte no navegador, priorizando a troca de exibição para melhor performance.

Arquivo de Configuração Principal

As configurações globais do projeto estão definidas em metadados.json na raiz. Este arquivo gerencia dependências, scripts e metadados do pacote NPM.

Exemplo adaptado:

{
  "name": "fontsource-modernizado",
  "version": "5.2.1",
  "description": "Sistema para hospedar fontes open source via pacotes NPM.",
  "main": "index.js",
  "scripts": {
    "build": "node utilitarios/gerar-bundles.js",
    "sync": "node utilitarios/sincronizar-versoes.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/exemplo/fontsource.git"
  },
  "keywords": [
    "auto-hospedagem",
    "font-face",
    "woff2",
    "css-fontes"
  ],
  "author": "Comunidade Fontsource",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/exemplo/fontsource/issues"
  },
  "homepage": "https://fontsource-modernizado.dev/"
}

Esta configuração permite customizar comandos de build e sincronização, além de definir informações essenciais para o ecossistema NPM.