Preparar a tipografia para web
Protocolo operacional
- Plano e progresso: planejar seleção, licença, arquivos, CSS e testes.
- Fontes de verdade: ler a direção visual, as licenças e
webfonts.md.
- Escopo e idempotência: não baixar ou redistribuir fonte sem licença
compatível. Preservar arquivos existentes com hash igual.
- Validação: conferir licença, MIME, peso, estilo, carregamento, fallback e
legibilidade.
- Resumo final: registrar famílias, origem, licença, arquivos, CSS e
pendências.
Fluxo
Escolher famílias para títulos, corpo, interface e código com base no idioma,
no repertório necessário e nas aplicações.
Preferir WOFF2 variável quando o suporte e a licença permitirem. Manter
arquivos estáticos apenas para pesos realmente usados.
Registrar cada arquivo em .brandfy/fonts.json, incluindo URL direta,
licença, autoria, peso, estilo e hash opcional.
Executar:
node <caminho-da-skill>/scripts/download-fonts.mjs \
--manifest .brandfy/fonts.json \
--output brand/fonts
Gerar brand/fonts/fonts.css com @font-face, font-display: swap,
fallbacks e tokens de família.
Definir escala, line-height, tracking, comprimentos de linha e usos por
função no manual.
Testar acentos, números, símbolos, negrito, itálico e carregamento offline.
Quando a fonte for proprietária ou hospedada por serviço externo, gerar o CSS
de integração sem copiar o arquivo para o repositório.
Raciocínio do especialista
Escolher tipografia pela tarefa: leitura longa, interface, título, número,
código, idioma e personalidade exigem parâmetros diferentes. Comparar cobertura
de caracteres, legibilidade, pesos úteis, métricas, performance, licença,
fallback e manutenção. A semelhança estética com uma referência não compensa
arquivo sem licença ou família que falha em acentos e telas pequenas.
1---2name: brandfy-tipografia-web3description: Seleciona webfonts, baixa arquivos licenciados e gera CSS tipográfico. Use para preparar fontes locais, fallbacks e escalas da marca.4---56# Preparar a tipografia para web78## Protocolo operacional910- **Plano e progresso:** planejar seleção, licença, arquivos, CSS e testes.11- **Fontes de verdade:** ler a direção visual, as licenças e12 [webfonts.md](references/webfonts.md).13- **Escopo e idempotência:** não baixar ou redistribuir fonte sem licença14 compatível. Preservar arquivos existentes com hash igual.15- **Validação:** conferir licença, MIME, peso, estilo, carregamento, fallback e16 legibilidade.17- **Resumo final:** registrar famílias, origem, licença, arquivos, CSS e18 pendências.1920## Fluxo21221. Escolher famílias para títulos, corpo, interface e código com base no idioma,23 no repertório necessário e nas aplicações.242. Preferir WOFF2 variável quando o suporte e a licença permitirem. Manter25 arquivos estáticos apenas para pesos realmente usados.263. Registrar cada arquivo em `.brandfy/fonts.json`, incluindo URL direta,27 licença, autoria, peso, estilo e hash opcional.284. Executar:2930 ```bash31 node <caminho-da-skill>/scripts/download-fonts.mjs \32 --manifest .brandfy/fonts.json \33 --output brand/fonts34 ```35365. Gerar `brand/fonts/fonts.css` com `@font-face`, `font-display: swap`,37 fallbacks e tokens de família.386. Definir escala, line-height, tracking, comprimentos de linha e usos por39 função no manual.407. Testar acentos, números, símbolos, negrito, itálico e carregamento offline.4142Quando a fonte for proprietária ou hospedada por serviço externo, gerar o CSS43de integração sem copiar o arquivo para o repositório.4445## Raciocínio do especialista4647Escolher tipografia pela tarefa: leitura longa, interface, título, número,48código, idioma e personalidade exigem parâmetros diferentes. Comparar cobertura49de caracteres, legibilidade, pesos úteis, métricas, performance, licença,50fallback e manutenção. A semelhança estética com uma referência não compensa51arquivo sem licença ou família que falha em acentos e telas pequenas.
promovaweb