📘 Aula 14 MD-2: Usando Fontes Externas Personalizadas 📘

Introdução

Nesta aula vamos aprender a usar **fontes externas personalizadas**, ou seja, aquelas que você baixa do seu computador e aplica no site. Esse recurso permite criar identidade visual única e tornar seu projeto mais atraente.

💡 Dica: Sites como Dafont.com oferecem milhares de fontes gratuitas para uso pessoal, perfeitas para teste e aprendizado.

O que são fontes externas?

Fontes externas são arquivos de fonte (.ttf, .otf, .woff, .woff2, .svg, etc.) que não estão instalados no sistema do usuário. Elas são adicionadas ao site com CSS usando @font-face.

Principais formatos:

TrueType (.ttf): compatível com a maioria dos navegadores.
OpenType (.otf): suporta tipografia avançada, ligaduras e variações.
Embedded OpenType (.eot): usado historicamente no Internet Explorer.
OpenType AAT (.ttc, Apple Advanced Typography): usado em sistemas Apple.
SVG (.svg): usado em ícones e fontes vetoriais escaláveis.

💡 Observação: você não precisa ter todos os formatos; um TTF ou WOFF2 geralmente é suficiente para projetos modernos.

Como usar com @font-face exemplo:

Para usar uma fonte externa no seu site, você deve:

Baixar a fonte desejada (.ttf, .otf, etc.) do site confiável.
Criar uma pasta fonts no projeto e colocar os arquivos lá.
Declarar a fonte no CSS usando @font-face dessa forma abaixo:

<style>
    @font-face {
    font-family: 'nome-da-fonte';
    src: url('fonts/arquivo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;}
</style>

Depois, basta aplicar a fonte nos elementos desejados:

<style>
h1 { font-family: 'nome-da-fonte', sans-serif; color: #E94E77; }
p  { font-family: 'nome-da-fonte', sans-serif; color: #333; }
</style>

Importante!

Sempre inclua uma fonte de fallback (ex: sans-serif) para garantir que o texto seja exibido corretamente caso a fonte personalizada não carregue.

Se certifique de sempre colocar o nome correto da fonte, que deve ser igual ao do arquivo da fonte.

Exemplo Prático

Aqui estão exemplos visuais aplicando as fontes externas baixadas:

Fonte Love - ideal para títulos decorativos

Fonte Fitgirl - ótima para destaque de parágrafos

Fonte Angelia - cursiva elegante para subtítulos

Fonte Lovely - romântica e delicada para seções especiais

Dicas Avançadas

Combine fontes: use uma fonte decorativa para títulos e uma legível para corpo do texto.
Evite muitas fontes diferentes, isso prejudica a estética e a performance.
Use font-display: swap; para evitar que o texto fique invisível enquanto a fonte carrega.
Teste a renderização em diferentes navegadores e dispositivos.
Mantenha os nomes das fontes consistentes no CSS e arquivos.

Boas Práticas

Coloque os arquivos de fonte em uma pasta organizada, ex: fonts/.
Use fontes com licença adequada para seu projeto (Dafont.com indica licença de uso).
Limite o número de fontes externas para melhorar desempenho.
Evite espaços em nomes de arquivo ou use %20 se houver.
Inclua sempre uma fonte de fallback no CSS.

Resumo

@font-face permite usar fontes externas baixadas em sites.
Fontes podem ser TTF, OTF, WOFF, WOFF2, EOT, SVG, etc.
Organize arquivos em pastas e nomeie corretamente.
Use boas práticas de performance e legibilidade.
Site confiável como Dafont.com oferece milhares de opções de fontes gratuitas.