Personalizando Fonts no React + Material UI [Muito Fácil]

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?

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

Clique nesse ícone

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 */
}