Eu coloquei a fonte "poppins" dentro do "body", tem algum problema?
Eu coloquei a fonte "poppins" dentro do "body", tem algum problema?
Olá! Tudo bem?
Uma das abordagens mais corretas e comuns é definir a fonte diretamente no body, pois quase todos os elementos da página herdam essa configuração automaticamente, evitando repetição de código e deixando o projeto mais organizado.
body {
font-family: 'Poppins', sans-serif;
}
Sempre inclua uma fonte de fallback, como sans-serif, para garantir que o texto seja exibido corretamente caso a fonte principal não carregue.
Para usar fontes como a Poppins, uma forma prática é importá-la pelo Google Fonts adicionando as tags <link> no <head> do HTML:
<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@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
Depois basta aplicar no CSS normalmente.
Além do Google Fonts, outros sites como o FontSpace também oferecem fontes personalizadas para uso.
Para projetos que exigem mais performance e independência de serviços externos, a abordagem mais recomendada é hospedar a fonte localmente usando a regra @font-face diretamente no CSS.
Isso mantém o HTML mais limpo, segue o princípio de separação entre estrutura e aparência, e reduz a dependência de servidores de terceiros, aumentando a privacidade da aplicação.
O formato mais recomendado atualmente é o .woff2, por ter melhor compactação e carregamento mais rápido nos navegadores modernos. Também é importante usar a propriedade font-display: swap, que faz o navegador exibir uma fonte temporária enquanto a principal carrega, evitando que o texto fique invisível.
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'Inter', sans-serif;
background: #f5f5f5;
color: #222;
}
h1 { font-weight: 700; }
p { font-weight: 400; }
Na maioria dos casos, definir a fonte no body já resolve o projeto inteiro.
Você só precisa sobrescrever quando quiser um estilo diferente em partes específicas, como títulos:
body {
font-family: 'Poppins', sans-serif;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
}
Evite repetir a mesma fonte em vários elementos separadamente, pois isso deixa o código maior e mais difícil de manter:
/* Evite isso */
p { font-family: 'Poppins'; }
button { font-family: 'Poppins'; }
div { font-family: 'Poppins'; }
Em projetos modernos, é comum usar variáveis CSS para facilitar futuras alterações.
Assim, se precisar trocar a fonte do site inteiro, basta alterar em um único lugar:
:root {
--font-primary: 'Poppins', sans-serif;
}
body {
font-family: var(--font-primary);
}
Qualquer dúvida, comente ai.
Bons estudos!