Criar uma declaração CSS @font-face com arquivos de fonte

Crie uma declaração CSS @font-face completa sem conferir repetidamente pontuação, aspas ou ordem dos descritores. Informe a família, um ou mais arquivos de fonte com seus formatos, além do peso e do estilo. O resultado é determinístico, pronto para copiar e mantém a ordem escolhida para que formatos modernos venham antes dos arquivos alternativos.

Descreva os arquivos na ordem em que o navegador deve testá-los

Comece pelo nome público da família que será usado na propriedade font-family do aplicativo. Em seguida, adicione cada origem como um registro separado, com caminho e indicação de formato. A ordem importa: o navegador percorre a lista src da esquerda para a direita e escolhe o primeiro recurso compatível.

Uma configuração comum coloca um WOFF2 compacto primeiro e um WOFF alternativo depois. O gerador preserva exatamente essa sequência; ele não ordena, deduz, baixa nem inspeciona arquivos. Os caminhos podem ser URL relativas, como /fonts/newsreader.woff2, ou endereços completos.

O valor format é emitido como indicação CSS explícita e deve corresponder ao arquivo real. Aspas e barras invertidas em nomes, caminhos e formatos são escapadas nas strings CSS. Valores vazios e caracteres que poderiam romper um descritor são recusados, em vez de gerar uma regra aparentemente válida que falha ao ser colada.

Pelo menos uma origem é obrigatória, pois uma regra @font-face sem um src utilizável não consegue carregar uma fonte.

Defina peso e estilo compatíveis com o arquivo

Os descritores font-weight e font-style informam ao navegador quais solicitações essa fonte pode atender. Eles devem representar os dados do arquivo, e não um efeito visual que o navegador precisaria sintetizar. Para uma fonte estática regular, peso 400 e estilo normal são escolhas comuns.

Um arquivo itálico geralmente mantém o peso e usa italic, enquanto um negrito pode usar 700. Fontes variáveis aceitam intervalos suportados, como 100 900, quando o arquivo realmente contém esse eixo. O gerador recebe texto de descritor CSS em vez de limitar esses campos a um menu curto, permitindo valores tradicionais e sintaxe válida para fontes variáveis.

Espaços externos são removidos; quebras de linha, chaves e ponto e vírgula capazes de escapar do descritor são rejeitados. A ferramenta não verifica se o binário contém o peso ou estilo declarado. Crie uma regra para cada variante estática e mantenha o mesmo nome de família nos arquivos relacionados.

Assim, a correspondência normal do CSS seleciona a variante correta sem exigir alterações nas declarações do site inteiro.

Copie o resultado ou gere-o durante a compilação

A saída traz uma regra CSS formatada e também família normalizada, quantidade de origens, peso e estilo. Copie o valor css para uma folha de estilos antes dos seletores que usam a família ou chame o serviço em um script que reúne os ativos tipográficos. A regra gerada se concentra em família, origem, peso e estilo.

Ela não tenta adivinhar propriedades opcionais como font-display, unicode-range, size-adjust, ascent-override, descent-override ou recursos tipográficos, pois essas escolhas dependem da política de carregamento, cobertura de glifos e compatibilidade métrica. Acrescente esses descritores depois, se necessário. A ferramenta não acessa a rede nem confirma se o caminho existe; teste a folha final nos navegadores atendidos e consulte o painel de rede para encontrar ativos ausentes ou MIME incorreto.

A serialização determinística ajuda equipes que publicam fontes: entradas iguais sempre produzem a mesma saída, a prioridade fica clara para revisão e listas vazias falham cedo.