Aulas Complementares | Google Fonts

01. O que é Google Fonts?

📌 Definição

O que é? Google Fonts é uma biblioteca de fontes que podem ser utilizadas em sites e aplicações. Ele permite pesquisar diferentes famílias tipográficas, visualizar como elas ficam e obter o código necessário para utilizá-las em um projeto.

🎯 Para que serve?

O Google Fonts é utilizado principalmente para melhorar a apresentação visual dos textos de um site.

Escolher diferentes estilos de fontes.
Melhorar a identidade visual do site.
Criar títulos mais destacados.
Melhorar a leitura dos textos.
Utilizar diferentes pesos de fonte.
Criar combinações entre fontes.

📖 Importante O navegador possui algumas fontes instaladas por padrão, porém você pode utilizar outras fontes através de recursos externos, como o Google Fonts.

02. Acessando o Google Fonts

Definição O Google Fonts possui um site próprio onde é possível pesquisar e selecionar fontes.

🌐 Acesso

Site: https://fonts.google.com/

📝 Passo a passo

Abra o navegador.
Acesse o Google Fonts.
Utilize o campo de pesquisa.
Digite o nome da fonte desejada.
Clique na fonte.
Analise os estilos disponíveis.
Escolha os pesos necessários.

💡 Dica Não escolha uma fonte somente porque ela é bonita. Pense também em:

facilidade de leitura;
tamanho dos textos;
objetivo do site;
público do projeto;
combinação com outras fontes.

03. O que é uma Família de Fonte?

Definição Uma família de fonte é um conjunto de estilos pertencentes à mesma fonte.

💻 Exemplo

Roboto

Roboto Light
Roboto Regular
Roboto Medium
Roboto Bold
Roboto Black

📖 Explicação Todos esses estilos pertencem à família Roboto, porém possuem diferentes pesos e características visuais.

🎯 No CSS

font-family: "Roboto", sans-serif;

04. Entendendo o Font-Weight

Definição A propriedade font-weight define o peso, ou seja, a espessura da fonte.

📊 Pesos mais utilizados

Peso	Nome comum	Utilização
100	Thin	Muito fina
300	Light	Leve
400	Regular	Normal
500	Medium	Médio
600	Semi Bold	Destaque
700	Bold	Negrito
800	Extra Bold	Forte
900	Black	Muito forte

💻 Exemplo

h1 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

💡 Dica Nem toda fonte possui todos os pesos. Por isso, sempre verifique no Google Fonts quais pesos estão disponíveis antes de utilizá-los.

05. Escolhendo uma Fonte

Definição Antes de utilizar uma fonte no projeto, você precisa escolher uma família tipográfica e os pesos que serão utilizados.

📝 Passo a passo

Acesse o Google Fonts.
Pesquise uma fonte.
Clique na família da fonte.
Observe os diferentes estilos.
Escolha os pesos necessários.
Copie o código fornecido pelo Google Fonts.

⚠️ Atenção Evite selecionar muitos pesos sem necessidade. Se seu site utiliza apenas texto normal e títulos em negrito, provavelmente não existe necessidade de carregar vários pesos.

06. Importando uma Fonte pelo HTML

Definição Uma das formas mais simples de utilizar Google Fonts é adicionando o código fornecido pelo serviço dentro da seção <head> do HTML.

💻 Exemplo

<head>

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

</head>

📖 O que aconteceu? O HTML informa ao navegador que deverá carregar a fonte escolhida antes de utilizá-la na página.

07. Utilizando a Fonte no CSS

Definição Depois de importar a fonte, precisamos informar ao CSS quais elementos deverão utilizá-la.

💻 Exemplo

body {
    font-family: "Poppins", sans-serif;
}

📖 Explicação Nesse exemplo, todo o conteúdo do body utilizará a fonte Poppins. O sans-serif funciona como uma fonte alternativa caso a Poppins não possa ser carregada.

08. Por que utilizar uma Fonte Alternativa?

Definição Uma fonte alternativa é utilizada como uma segunda opção caso a fonte principal não esteja disponível.

💻 Exemplo

font-family: "Poppins", Arial, sans-serif;

📖 Como interpretar? O navegador tenta utilizar as fontes na ordem apresentada:

Poppins
Arial
qualquer fonte sans-serif disponível

💡 Dica É uma boa prática sempre informar uma família genérica como alternativa.

09. Importando com @import

Definição Outra forma de carregar uma fonte é utilizando @import diretamente no CSS.

💻 Exemplo

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
    font-family: "Poppins", sans-serif;
}

⚠️ Atenção Quando utilizar @import, ele deve aparecer no início do arquivo CSS, antes das demais regras CSS.

💡 Qual método devo utilizar? Para os projetos dos alunos, o método utilizando <link> no HTML costuma ser uma opção simples e clara.

10. Utilizando Duas Fontes no Mesmo Site

Definição É possível utilizar diferentes famílias tipográficas em diferentes partes do site.

🎯 Exemplo

Podemos utilizar uma fonte para títulos e outra para textos.

h1 {
    font-family: "Poppins", sans-serif;
}

p {
    font-family: "Roboto", sans-serif;
}

📖 Organização Uma combinação muito comum é:

Títulos: uma fonte com maior destaque.
Textos: uma fonte simples e confortável para leitura.

⚠️ Cuidado Utilizar muitas fontes diferentes pode deixar o site visualmente confuso. Para a maioria dos projetos, uma ou duas famílias tipográficas já são suficientes.

11. Exemplo com Poppins

Sobre o exemplo A Poppins é uma fonte bastante utilizada em interfaces, sites institucionais e projetos modernos.

💻 HTML

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

🎨 CSS

body {
    font-family: "Poppins", sans-serif;
}

h1 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

💡 Experimente Altere os pesos para observar a diferença:

12. Fontes Muito Utilizadas

Fonte	Característica	Possível utilização
Poppins	Moderna e geométrica	Sites modernos
Roboto	Simples e versátil	Interfaces
Montserrat	Forte e moderna	Títulos
Open Sans	Fácil leitura	Textos
Lato	Elegante e equilibrada	Sites institucionais
Inter	Desenvolvida para interfaces	Sistemas e aplicativos

💡 Importante Não existe uma única fonte correta. A escolha depende do objetivo do projeto, identidade visual e facilidade de leitura.

13. Google Fonts não Define o Tamanho do Texto

Atenção O Google Fonts fornece a família tipográfica. O tamanho do texto continua sendo controlado pelo CSS.

💻 Exemplo

h1 {
    font-family: "Poppins", sans-serif;
    font-size: 40px;
}

p {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
}

📖 Observe Temos propriedades diferentes:

font-family → família da fonte
font-size → tamanho
font-weight → peso

14. Melhorando a Leitura com line-height

Definição A propriedade line-height controla o espaço vertical entre as linhas de um texto.

💻 Exemplo

p {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

📖 Por que isso é importante? Um texto com linhas muito próximas pode dificultar a leitura. A utilização de um espaçamento adequado torna os textos mais confortáveis para o usuário.

15. Minha Fonte não Aparece. O que Fazer?

⚠️ Problema comum O aluno escolhe uma fonte no Google Fonts, mas ela continua aparecendo como uma fonte comum no navegador.

🔎 Verifique os seguintes pontos

Confira se o código da fonte foi colocado corretamente.
Verifique se o <link> está dentro do <head>.
Confira o nome da fonte no CSS.
Verifique se as aspas estão corretas.
Confirme se o peso utilizado foi selecionado no Google Fonts.
Atualize o navegador.
Verifique sua conexão com a internet.

❌ Exemplo de erro

font-family: Poppins123;

✅ Exemplo correto

font-family: "Poppins", sans-serif;

16. O Peso da Fonte não Funciona

Problema O aluno coloca font-weight: 800, mas a aparência da fonte não muda como esperado.

📖 Possível motivo O peso 800 pode não ter sido carregado para aquela família de fonte. É necessário verificar no Google Fonts quais pesos foram selecionados.

💻 Exemplo

h1 {
    font-weight: 800;
}

💡 Solução Volte ao Google Fonts e verifique se o peso utilizado está disponível e foi incluído no código de importação.

17. O que significa display=swap?

Definição O parâmetro display=swap faz parte da configuração utilizada no carregamento das fontes.

💻 Exemplo

https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap

📖 Explicação A ideia é permitir que o navegador apresente o texto utilizando uma fonte alternativa enquanto a fonte externa está sendo carregada.

💡 Para o aluno Você não precisa decorar esse parâmetro. Quando utilizar o código fornecido pelo Google Fonts, normalmente ele já aparecerá configurado.

18. Organizando as Fontes no Projeto

Boa prática Em projetos maiores, é importante definir um padrão tipográfico para evitar que cada elemento utilize uma fonte diferente.

💻 Exemplo

body {
    font-family: "Roboto", sans-serif;
}

h1,
h2,
h3 {
    font-family: "Poppins", sans-serif;
}

📖 Resultado O projeto passa a possuir uma regra clara:

Textos → Roboto
Títulos → Poppins

19. Organizando Fontes com Variáveis CSS

Definição Variáveis CSS permitem armazenar valores que podem ser reutilizados em diferentes partes do projeto.

💻 Exemplo

:root {

    --fonte-titulo: "Poppins", sans-serif;

    --fonte-texto: "Roboto", sans-serif;

}


h1 {

    font-family: var(--fonte-titulo);

}


p {

    font-family: var(--fonte-texto);

}

📖 Por que utilizar? Se você decidir trocar a fonte do projeto no futuro, poderá alterar a variável em um único lugar.

20. Fontes e Acessibilidade

Definição A escolha de uma fonte também deve considerar a facilidade de leitura e a acessibilidade do conteúdo.

♿ Boas práticas

Evite fontes excessivamente decorativas em textos longos.
Utilize tamanho de texto adequado.
Mantenha bom contraste entre texto e fundo.
Utilize espaçamento adequado entre linhas.
Evite utilizar muitas famílias diferentes.
Faça testes em diferentes dispositivos.

💡 Pense como usuário Uma fonte pode ser bonita para um título, mas não necessariamente será confortável para ler várias linhas de texto.

21. Google Fonts e Responsividade

Definição O uso de fontes também deve ser pensado para diferentes tamanhos de tela.

💻 Exemplo

h1 {
    font-family: "Poppins", sans-serif;
    font-size: 42px;
}


@media (max-width: 768px) {

    h1 {
        font-size: 30px;
    }

}

📖 Explicação Nesse exemplo, o título possui um tamanho maior em telas grandes e diminui em telas menores.

🧪 22. Atividade Prática

Objetivo Criar uma pequena página utilizando duas fontes do Google Fonts.

📝 Faça o seguinte:

Acesse o Google Fonts.
Escolha uma fonte para os títulos.
Escolha uma fonte para os textos.
Selecione os pesos necessários.
Copie o código de importação.
Adicione o código ao HTML.
Configure as fontes no CSS.
Crie um título.
Crie pelo menos três parágrafos.
Altere os pesos das fontes.
Teste no navegador.

🎯 Resultado esperado

Meu Projeto

Este é um exemplo de página utilizando
Google Fonts.

Estou aprendendo HTML e CSS.

A tipografia ajuda a melhorar a
identidade visual do site.

🧪 23. Atividade 2 — Compare as Fontes

Objetivo Perceber como a escolha da fonte modifica completamente a aparência de uma página.

📝 Faça três versões

Utilize Poppins.
Troque para Roboto.
Troque para Montserrat.

Observe:

Qual fonte parece mais moderna?
Qual possui melhor leitura?
Qual combina melhor com o projeto?
Qual funciona melhor para títulos?

💡 Desenvolvedor também toma decisões de design O desenvolvedor front-end não trabalha apenas com código. Ele também precisa compreender como o usuário perceberá visualmente a interface.

✅ 24. Checklist Google Fonts

Verifique se você aprendeu Marque cada item depois de realizar a tarefa.

🏆 25. Desafio Final — Crie a Tipografia do Seu Site

Desafio Agora você deverá aplicar o conhecimento adquirido em um projeto real.

🎯 Objetivo

Criar a identidade tipográfica de uma página web.

📝 Requisitos

Escolha uma fonte para os títulos.
Escolha uma fonte para os textos.
Utilize pelo menos dois pesos.
Importe as fontes pelo Google Fonts.
Configure o font-family.
Configure o font-weight.
Configure o font-size.
Configure o line-height.
Teste em computador.
Teste em celular.

💻 Estrutura sugerida

meu-projeto/
│
├── index.html
│
├── css/
│   └── style.css
│
└── imagens/

🎨 Exemplo de CSS

:root {

    --fonte-titulo: "Poppins", sans-serif;

    --fonte-texto: "Roboto", sans-serif;

}


body {

    font-family: var(--fonte-texto);

    font-size: 18px;

    line-height: 1.6;

}


h1,
h2,
h3 {

    font-family: var(--fonte-titulo);

}


h1 {

    font-size: 42px;

    font-weight: 700;

}

🚀 Pense como um profissional Não escolha uma fonte simplesmente porque ela parece bonita. Pense:

Quem vai acessar o site?
O conteúdo será fácil de ler?
A fonte combina com o projeto?
Os títulos possuem destaque?
O texto funciona bem no celular?

🏁 Resultado esperado Ao finalizar este desafio, você deverá ser capaz de escolher e aplicar fontes profissionais em seus projetos HTML e CSS sem precisar copiar todo o processo novamente de outra pessoa.

📘 Bem-vindo à Aula Complementar

01. O que é Google Fonts?

📌 Definição

🎯 Para que serve?

02. Acessando o Google Fonts

🌐 Acesso

📝 Passo a passo

03. O que é uma Família de Fonte?

💻 Exemplo

🎯 No CSS

04. Entendendo o Font-Weight

📊 Pesos mais utilizados

💻 Exemplo

05. Escolhendo uma Fonte

📝 Passo a passo

06. Importando uma Fonte pelo HTML

💻 Exemplo

07. Utilizando a Fonte no CSS

💻 Exemplo

08. Por que utilizar uma Fonte Alternativa?

💻 Exemplo

09. Importando com @import

💻 Exemplo

10. Utilizando Duas Fontes no Mesmo Site

🎯 Exemplo

11. Exemplo com Poppins

💻 HTML

🎨 CSS

12. Fontes Muito Utilizadas

13. Google Fonts não Define o Tamanho do Texto

💻 Exemplo

14. Melhorando a Leitura com line-height

💻 Exemplo

15. Minha Fonte não Aparece. O que Fazer?

🔎 Verifique os seguintes pontos

❌ Exemplo de erro

✅ Exemplo correto

16. O Peso da Fonte não Funciona

💻 Exemplo

17. O que significa display=swap?

💻 Exemplo

18. Organizando as Fontes no Projeto

💻 Exemplo

19. Organizando Fontes com Variáveis CSS

💻 Exemplo

20. Fontes e Acessibilidade

♿ Boas práticas

21. Google Fonts e Responsividade

💻 Exemplo

🧪 22. Atividade Prática

📝 Faça o seguinte:

🎯 Resultado esperado

🧪 23. Atividade 2 — Compare as Fontes

📝 Faça três versões

✅ 24. Checklist Google Fonts

🏆 25. Desafio Final — Crie a Tipografia do Seu Site

🎯 Objetivo

📝 Requisitos

💻 Estrutura sugerida

🎨 Exemplo de CSS