📘 Aula 15 MD-2: Capturando fontes usadas em sites 📘

Introdução

Em projetos de web design, identificar as fontes usadas em sites pode ser útil para estudo, inspiração ou prática. Nesta aula, vamos aprender técnicas para capturar e utilizar essas fontes de forma correta.

Instalando a extensão Fonts Ninja

O primeiro passo é instalar a extensão Fonts Ninja no seu navegador Chrome:

• Abra o Chrome Web Store.

• Pesquise por Fonts Ninja e clique em Adicionar ao Chrome.

• Após a instalação, o ícone da extensão aparecerá no canto superior do navegador.

Capturando fontes em qualquer site

Passos para identificar as fontes utilizadas em um site:

1. Acesse o site que deseja analisar.

2. Clique no ícone da extensão Fonts Ninja.

3. Verifique a lista de fontes utilizadas e suas propriedades, como nome, estilo, peso e tamanho.

Aplicando fontes capturadas em projetos

Após identificar a fonte, você pode aplicá-la em projetos próprios:

• Se a fonte estiver no Google Fonts, copie o código de importação ou o link para o HTML.

• Se a fonte estiver disponível como arquivo, faça o download e use a regra @font-face em seu CSS.

• Teste a fonte em títulos, parágrafos e botões, verificando legibilidade e harmonia visual.

Verificando compatibilidade

Antes de usar qualquer fonte capturada:

• Confirme se possui todos os glifos e caracteres especiais.

• Evite fontes que não suportem acentos ou símbolos do português.

• Faça testes em diferentes tamanhos de tela e dispositivos.

Resumo da aula

• Instale a extensão Fonts Ninja para identificar fontes em sites.

• Copie o nome da fonte e busque no Google Fonts ou Dafont.

• Verifique a compatibilidade e aplique a fonte em projetos reais.

• Esta técnica é uma forma prática de estudar tipografia aplicada em web design.

📌 Lembre-se: esta aula complementa os conceitos de tipografia aprendidos nas aulas anteriores. Revise-as se necessário antes de avançar.