Como adicionar fontes a um projeto de React JS
Neste artigo você aprenderá a como adicionar fontes a um projeto de React JS, uma ação muito comum em projetos web comerciais.
Fala programador(a), beleza? Bora aprender mais sobre React JS!
Uma parte crucial da criação de um site ou uma aplicação web é a aparência e o estilo.
As fontes são um aspecto importante do estilo e podem ajudar a definir a personalidade e o tom da sua aplicação.
O React JS, sendo uma biblioteca de interface de usuário, permite que você inclua facilmente fontes personalizadas em seus projetos.
Neste artigo, vamos explorar como você pode adicionar fontes a um projeto React JS de maneira eficiente e eficaz.
Adicionando Fontes Locais
Se você tem fontes locais que deseja adicionar ao seu projeto React JS, aqui estão os passos para fazer isso.
1. Adicione as fontes à pasta do projeto
Primeiro, você deve adicionar as fontes que deseja usar à pasta do seu projeto.
Uma maneira comum de fazer isso é criar uma pasta chamada assets na raiz do seu projeto e, em seguida, criar uma subpasta chamada fonts dentro dela.
Você pode então colocar seus arquivos de fontes (.ttf, .otf, .woff, etc.) na pasta fonts.
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
2. Crie um arquivo CSS
Em seguida, você precisará criar um arquivo CSS para importar suas fontes. Isso pode ser feito na mesma pasta assets.
No arquivo CSS, você pode usar a regra @font-face para importar suas fontes.
Aqui está um exemplo:
/* assets/fonts.css */
@font-face {
font-family: 'MinhaFonte';
src: local('MinhaFonte'), url('./fonts/MinhaFonte.woff') format('woff');
}
3. Importe o arquivo CSS
Finalmente, você precisará importar o arquivo CSS em seu arquivo index.js (ou App.js dependendo de como seu projeto está estruturado).
Isso pode ser feito usando a sintaxe import:
// index.js ou App.js import './assets/fonts.css';
Adicionando Fontes do Google Fonts
Se você quer usar fontes do Google Fonts, o processo é ainda mais simples.
1. Selecione suas fontes
Vá ao site do Google Fonts e selecione as fontes que você deseja usar.
Depois de selecionar suas fontes, você verá uma seção chamada “Embed”.
Copie o link fornecido lá.
2. Adicione o link ao seu arquivo HTML
Em seguida, vá para o arquivo public/index.html do seu projeto e adicione o link que você copiou na seção <head> do arquivo.
Aqui está um exemplo:
<!-- public/index.html --> <head> <!-- Outros códigos... --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>
3. Use a fonte em seu CSS
Agora você pode usar a fonte em seus arquivos CSS (ou nos estilos inline de seus componentes) assim como qualquer outra fonte.
Aqui está um exemplo:
// SeuComponente.js
const SeuComponente = () => {
return <div style={{ fontFamily: 'Roboto' }}>Olá, mundo!</div>
}
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Adicionar fontes a um projeto React JS é um processo direto e pode melhorar significativamente a aparência da sua aplicação.
Quer você esteja usando fontes locais ou do Google Fonts, o React oferece a flexibilidade de que você precisa para personalizar seu projeto ao seu gosto.
Lembre-se, no entanto, que a adição de muitas fontes pode afetar o desempenho da sua aplicação, então use-as com moderação.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.
A fonte não aparece? Veja o que checar:
É o erro mais comum quando você adiciona uma fonte nova no React, e quase sempre é um detalhe bobo
Antes de achar que quebrou tudo, roda essa checklist rápida:
O nome no font-family bate EXATAMENTE com o nome declarado no @font-face ou com o nome do Google Fonts? Maiúscula, minúscula e espaço contam
O caminho do arquivo no src está certo? Se a fonte está em assets/fonts, o caminho relativo dentro do CSS precisa apontar pra lá
Você realmente importou o CSS no index.js ou App.js? Sem o import, o arquivo nem carrega
O formato do arquivo (.woff, .woff2, .ttf) é o mesmo que você declarou no format() do @font-face?
Se você usou Google Fonts, o link foi parar dentro do <head> do public/index.html mesmo, e não em outro lugar?
Na dúvida, abre o DevTools do navegador, vai na aba Network e filtra por Font
Se a fonte aparece com status de erro ali, o problema é o caminho ou o link
se ela nem aparece na lista, o import não rodou
Aplicando a fonte no projeto inteiro:
Até aqui a fonte foi aplicada em um componente ou num elemento específico
Mas quase sempre você quer que ela valha pro app todo, não só num <div> solto
O caminho mais direto é jogar o font-family no seletor body do seu CSS global
Assim tudo herda a fonte por padrão e você só sobrescreve onde precisar de algo diferente:
/ index.css ou App.css /
body { font-family: ‘Roboto’, sans-serif; }
Repara no sans-serif ali no final
Ele é a fonte de segurança (fallback): se por qualquer motivo a sua fonte não carregar, o navegador cai numa fonte parecida em vez de mostrar algo quebrado
sempre deixa um fallback genérico no fim da lista, é boa prática e te salva de susto
Perguntas frequentes
Preciso instalar alguma biblioteca pra usar fontes no React?
Não precisa
Tanto o @font-face com fontes locais quanto o link do Google Fonts funcionam com o CSS puro, sem pacote extra
Qual é melhor: fonte local ou Google Fonts?
Depende do projeto
Google Fonts é mais rápido de plugar e ótimo pra prototipar
fonte local te dá controle total e funciona mesmo sem internet ou quando você não quer depender de um serviço de fora
Posso usar mais de uma fonte no mesmo projeto?
Pode
Basta declarar cada uma (seja no @font-face, seja com vários links do Google Fonts) e chamar cada nome no font-family onde quiser
Só lembra que muitas fontes pesam no carregamento, então usa com moderação
Preciso reiniciar o servidor depois de adicionar a fonte?
Na maioria dos casos o hot reload já pega a mudança
mas se a fonte teimar em não aparecer, parar e subir o projeto de novo costuma resolver
Leia também
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
