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.
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.