Como usar uma fonte personalizada no seu site (teste primeiro)

Para usar uma fonte personalizada no seu site, você envia o arquivo da fonte para o seu site, diz ao CSS onde ele está com uma regra @font-face e depois usa a fonte com font-family. Antes de fazer tudo isso, dá para testar a fonte nas suas páginas de verdade: com a extensão gratuita FontMee você carrega um arquivo .woff2, .ttf ou .otf do seu computador e o vê em qualquer site com um clique, sem mudar nada e sem enviar nada.

O que é uma fonte personalizada

Uma fonte personalizada é simplesmente um arquivo de fonte que não é uma das fontes que todo computador já tem nem uma das fontes gratuitas do Google Fonts. Pode ser uma fonte da marca feita por um designer, uma que você comprou ou uma que você criou. Em geral ela vem como um arquivo terminado em .woff2, .woff, .ttf ou .otf. Ainda não tem o arquivo? O nosso guia para adicionar Google Fonts cobre as gratuitas.

Para sites, .woff2 é a melhor escolha: é pequeno, então as páginas carregam mais rápido, e todos os navegadores atuais conseguem lê-lo. .ttf e .otf são os formatos que você usa no computador. Também funcionam em navegadores, mas os arquivos são maiores. Se você só tem um .ttf ou .otf, para testar está ótimo.

Passo 1: Teste primeiro num site de verdade

Enviar uma fonte e escrever código só para descobrir que você não gostou desperdiça uma tarde. O FontMee é uma extensão gratuita do Chrome, um pequeno complemento que dá ao navegador um recurso novo, e deixa você experimentar fontes primeiro numa página ao vivo. Ele aceita também os seus próprios arquivos. O vídeo curto mostra o painel.

1. Instale o FontMee. Adicione pela Chrome Web Store. É grátis e não pede conta. Clique no ícone de quebra-cabeça do Chrome e fixe a extensão, assim ela fica sempre a um clique.
2. Abra uma página do seu site e clique no ícone do FontMee. O painel abre ao lado da página. Você também pode apertar Alt + Shift + F. As páginas do próprio Chrome (Nova guia, a Web Store, páginas chrome://) não podem ser alteradas.
3. Aperte Enviar e escolha o arquivo da fonte. Dá para escolher vários de uma vez, de até 6 MB cada. O FontMee dá à fonte o nome do arquivo, então my_brand_sans.woff2 vira my brand sans.
4. Procure em Minhas fontes. Os seus envios têm um filtro próprio e vêm marcados como Sua. Passe o mouse sobre uma para renomeá-la com o lápis ou apagá-la com a lixeira.
5. Clique na fonte para experimentá-la. Em Aplicar mudanças em escolha Tudo, Títulos ou Texto. Use Ajustar para o tamanho, a espessura e a altura da linha, e alterne entre Fonte original e Prévia do FontMee para comparar.
6. Digite as suas próprias palavras. Na caixa de texto de exemplo, digite um título de verdade, um nome ou uma frase com as suas letras especiais, para ver como a fonte lida com elas.

Os arquivos da sua fonte ficam no seu navegador, no seu computador. Nada é enviado, e o teste só muda o que você vê, então ninguém mais percebe. Quer mostrar o resultado a um cliente? O FontMee faz uma imagem de antes e depois: veja como.

Passo 2: Coloque o arquivo da fonte no seu site

Quando você estiver satisfeito, a fonte precisa morar no seu site, porque os navegadores dos visitantes só carregam arquivos que estão na internet, não no seu computador. Crie uma pasta chamada fonts e envie o arquivo para ela, do mesmo jeito que você envia imagens: pelo gerenciador de arquivos da sua hospedagem, por FTP ou pelo envio de fontes que o seu construtor de sites talvez ofereça. A pasta poderia ficar assim:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Use nomes de arquivo simples, em minúsculas e sem espaços (my-brand-sans.woff2, não My Brand Sans (1).woff2). Isso evita uma causa clássica de “a minha fonte não aparece”.

Passo 3: Conte ao CSS sobre a fonte

Agora você escreve duas coisinhas no CSS, as regras que dizem à página como ficar. Primeiro um bloco @font-face, que diz “existe uma fonte com este nome e o arquivo dela está aqui”. Depois uma regra normal que usa a fonte.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Em português claro: font-family no primeiro bloco é um nome que você inventa. src é onde está o arquivo, e a segunda linha é um reserva em .ttf para navegadores mais antigos. font-display: swap mostra o seu texto numa fonte reserva até a verdadeira chegar, para os visitantes nunca ficarem olhando um espaço vazio. Nas regras de baixo, a palavra depois da vírgula (sans-serif) é essa fonte reserva, e é boa prática sempre incluir uma.

Coloque esse CSS onde o seu site guarda os estilos: no style.css, no WordPress em Aparência, Personalizar, CSS adicional, ou na caixa de CSS personalizado do seu construtor de sites. Se o seu arquivo estiver em outra pasta, mude o caminho dentro de url().

O atalho: deixe o FontMee escrever

De volta ao FontMee, aperte Copiar CSS. Para uma fonte que você enviou, o FontMee escreve as suas regras e acrescenta um comentário com uma linha @font-face para começar. Mude o nome e a extensão do arquivo se os seus forem diferentes, por exemplo para .ttf. Prefere tudo pronto? Aperte Baixar ZIP para hospedar você mesmo. Você recebe uma pasta com o seu arquivo de fonte dentro de fonts, um fonts.css com o bloco @font-face, um fontmee.css com as suas regras e um README curto. Envie a pasta, ligue as duas folhas de estilo e pronto.

Quatro coisas para conferir antes de publicar

• Confira a licença. Um arquivo de fonte no seu computador não é automaticamente livre para ir para um site. Muitas licenças cobrem só o uso no desktop e têm uma licença web separada. O FontMee lembra você com “seu próprio arquivo: confira a licença antes de publicar”. Na dúvida, pergunte de onde veio a fonte.
• Confira as suas letras. Na caixa de exemplo, digite palavras com os seus caracteres especiais (ç, ã, é, ô, ü). Uma fonte pode parecer perfeita e mesmo assim não ter algumas letras, e aí essas letras aparecem numa fonte reserva.
• Mantenha uma fonte reserva. Termine cada font-family com serif ou sans-serif, para o texto continuar bonito enquanto a fonte carrega.
• Mantenha leve. Um ou dois arquivos de fonte bastam. Cada arquivo a mais deixa a página um pouco mais pesada, então escolha .woff2 quando puder.

Ainda não tem um site? Então a fonte vem em segundo lugar. Um site também precisa de uma casa para morar, e um construtor é o jeito mais rápido de ter uma sem código.

Baixe a extensão

O FontMee é grátis, com mais de 1.900 fontes, Copiar CSS em quatro formatos, um ZIP para hospedar você mesmo e o envio das suas próprias fontes. Sem conta, sem assinatura. Adicione pela Chrome Web Store ou leia primeiro a página do FontMee.

Bom saber antes de começar

Perguntas frequentes