Se você já leu a documentação e tentou personalizar suas fonts
quando está usando o Material UI no React deve ter fica espantado, mas calma lá, é bem mais simples que parece e vou explicar aqui.
1 Etapa 1
1.1 Escolha a fonte
Você vai importar sua font via CSS
Antes eu quero deixar uma recomendação, tenha um arquivo
Theme.css
Nesse arquivo em geral eu coloco tudo relacionado exclusivamente aos temas... meio óbvio né 😒
Veja um exemplo.
:root {
/* toknes cores */
--tons-neutro-bg-primary: #f9fafc;
--brand-color-primary: #3f8be9;
--brand-color-secondary: #0b1f4d;
--tons-neutro-text: #606162;
--tons-neutro-border: #e6e8f0;
--tons-neutro-bg-secondary: #fff;
/* medidas radius */
--radius-small: 0.25rem;
--radius-medium: 0.5rem;
--radius-large: 1rem;
--radius-xlarge: 1.5rem;
/* medidas fontes */
--font-size-small: 0.75rem;
--font-size-medium: 1rem;
--font-size-large: 1.25rem;
--font-size-xlarge: 1.5rem;
}
Isso não é obrigatório, é só uma sugestão 😉
1.2 Como e onde escolher minha fonte?
- Acesse o Google Fonts https://fonts.google.com/
Nesse exemplo estou usando a fonte Inter.
Quando acessamos a fonte, você pode ver as variações do font-weight
e aqui tem um passo importante.
⚡ Selecione somente as fontes que você vai usar no seu projeto.
Agora vem o pulo do gato 🙀
Aqui ele mostra as fontes que você selecionou, inclusive pode acrescentar mais.
E aqui está a parte importante, você vai copiar apenas o endereço http, que nesse exemplo seria esse aqui 👇
https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap
Etapa 2
Importando a fonte no CSS
Abra seu arquivo CSS principal ou onde está seu tema, no meu caso é o Theme.css
.
Agora basta adicionar esse @import
no topo
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700;900&display=swap);
:root {
/* toknes cores */
/* ... */
}
Etapa 3
Usando sua fonte
Agora que fez isso, nos seus arquivos CSS, basta importar o arquivo theme.css
e usar a fonte.
@import "./Theme.css"; /* importando o CSS do tema. */
body {
font-family: "Inter", sans-serif; /* sua nova fonte aqui */
}
Top comments (0)