Usando Google Fonts

Introdução

Nesta aula, vamos aprender a **usar fontes do Google Fonts** para personalizar nossos projetos web. As fontes são fundamentais para estética e legibilidade, permitindo criar sites mais atraentes e profissionais.

💡 Dica: Escolher fontes apropriadas melhora a experiência do usuário. Fontes limpas facilitam a leitura; fontes decorativas podem destacar títulos e seções importantes.

O que é Google Fonts?

Google Fonts é uma biblioteca online gratuita fornecida pelo Google, que oferece:

Centenas de fontes de diferentes estilos: serif, sans-serif, display e monospace.
Integração fácil via HTML ou CSS.
Controle de peso, estilo e variantes para títulos, textos e elementos específicos.
Compatibilidade ampla entre navegadores modernos sem instalar nada.
Atualizações constantes com novas fontes disponíveis.

Exemplo de Fontes Aplicadas

Roboto (regular): Este é um texto usando Roboto, fonte limpa e legível.

Roboto (negrito): Este é um texto Roboto em negrito.

Pacifico (decorativa): Esta é uma fonte cursiva e decorativa, ótima para títulos.

Montserrat: Montseratt é moderna, ideal para textos de destaque e títulos.

Como Usar Google Fonts

Existem duas formas principais de adicionar fontes do Google Fonts:

Via <link> no <head> do HTML: Copie o link da fonte desejada do site Google Fonts e cole dentro do <head> do seu HTML.
Via @import no CSS: Adicione no CSS usando @import url('...');. É útil em projetos grandes, mas pode adicionar atraso no carregamento.

💡 Dica: Para iniciantes, usar o método via <link> é mais direto e simples.

Exemplo Prático

1️⃣ Acesse Google Fonts e escolha uma fonte para seu projeto.

2️⃣ Copie o link de importação e cole dentro do <head>:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

3️⃣ Aplique a fonte em títulos e parágrafos usando style inline ou classes:

<h1 style="font-family: 'Roboto', sans-serif;">Título com Roboto</h1>
<p style="font-family: 'Roboto', sans-serif;">Parágrafo com Roboto</p>

4️⃣ Experimente diferentes pesos da fonte, como 400 (normal) e 700 (negrito), para criar hierarquia visual.

5️⃣ Você também pode usar fontes diferentes para títulos, subtítulos e parágrafos, combinando estilo e legibilidade.

Dicas Avançadas

Combine fontes complementares: uma serif para títulos e uma sans-serif para corpo de texto.
Use fontes variáveis quando disponíveis: permitem controlar peso, largura e estilo com um único link.
Evite carregar muitas fontes ao mesmo tempo para não prejudicar o desempenho.
Teste a legibilidade em diferentes tamanhos e dispositivos.
Em projetos profissionais, mantenha consistência de fontes entre páginas para identidade visual.

Boas práticas

Limite o número de fontes diferentes a 2 ou 3.
Use fontes para dar destaque apenas em títulos ou elementos importantes.
Prefira fontes legíveis para textos longos.
Sempre inclua uma fonte de fallback.
Verifique compatibilidade entre navegadores e dispositivos.

Resumo

Google Fonts oferece uma variedade de fontes gratuitas online.
Podemos importar fontes via <link> ou @import.
As fontes podem ser aplicadas com style="font-family:'NomeFonte', fallback;" ou classes CSS.
Boas práticas incluem limitar fontes, combinar estilos e garantir legibilidade.
Fontes bem escolhidas melhoram a estética e experiência de leitura do site.

📘 Aula 13 MD-2: Usando Google Fonts 📘