O uso de fontes personalizadas pode fazer toda a diferença no design de um site, tornando-o mais atrativo e alinhado com a identidade visual desejada. No CSS, a regra @font-face permite carregar fontes externas, garantindo que os visitantes vejam o site exatamente como planeado, independentemente das fontes instaladas nos seus dispositivos.

O Que é @font-face?

@font-face é uma regra do CSS que permite importar e utilizar fontes personalizadas diretamente nos teus estilos. Isso significa que não precisas depender apenas das fontes padrão do sistema operativo do utilizador.

Como Usar @font-face

Para usar @font-face, segue estes passos:

1. Faz o download da fonte no formato .woff, .ttf, ou outro suportado.
2. Guarda a fonte na pasta do teu projeto, por exemplo, fonts/.
3. Adiciona a regra @font-face ao teu CSS`, especificando o caminho para o ficheiro da fonte.

Exemplo Simples de @font-face:

@font-face {
    font-family: 'MinhaFonte';
    src: url('fonts/MinhaFonte.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MinhaFonte', Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

Neste exemplo:

• A fonte personalizada chama-se MinhaFonte.
• O ficheiro da fonte está guardado na pasta fonts/.
• O navegador usa esta fonte no body, e se não conseguir carregá-la, usa Arial como alternativa.

Trabalhar com Múltiplas Fontes

Se quiseres usar mais do que uma fonte personalizada, basta definir várias regras @font-face, uma para cada fonte:

@font-face {
    font-family: 'Mexican';
    src: url('fonts/MexicanTequila.woff') format('woff');
}

@font-face {
    font-family: 'Western';
    src: url('fonts/WesternStyle.woff') format('woff');
}

h1 {
    font-family: 'Western', Georgia, serif;
}

p {
    font-family: 'Mexican', 'Courier New', monospace;
}

Neste caso:

• Os <h1> usam a fonte Western, com Georgia como alternativa.
• Os <p> usam Mexican, e se falhar, Courier New.

Fontes Personalizadas com Variações de Peso

Se tens uma fonte com diferentes estilos (normal, negrito, itálico, etc.), podes defini-las separadamente:

@font-face {
    font-family: 'MinhaFonte';
    src: url('fonts/MinhaFonte-Regular.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'MinhaFonte';
    src: url('fonts/MinhaFonte-Bold.woff') format('woff');
    font-weight: bold;
}

p {
    font-family: 'MinhaFonte', sans-serif;
    font-weight: bold;
}

Desta forma, quando aplicares font-weight: bold;, o navegador escolherá automaticamente a versão negrito da fonte.

Melhor Prática: Usar Formato .WOFF

O formato mais recomendado é o .woff ou .woff2, pois são compactos e amplamente suportados. Se tens fontes em .ttf ou .otf, podes convertê-las para .woff com ferramentas online como CloudConvert.

Conclusão

A regra @font-face é uma ferramenta essencial para personalizar a tipografia do teu site. Seguindo as boas práticas e garantindo a compatibilidade, podes oferecer uma experiência visual mais rica e coerente aos utilizadores.

Se tens um site em WordPress, podes aplicar estes conceitos ao teu ficheiro CSS personalizado ou num tema filho para evitar perder as alterações em atualizações do tema principal. Boas experiências com @font-face! 🚀