DEV Community

Cover image for Personalizando Fonts no React + Material UI [Muito Fácil]
André Peixoto
André Peixoto

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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/

Google Fonts

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.

Selecione a fonte que vai usar no projeto

Agora vem o pulo do gato 🙀

Clique nesse ícone
Clique nesse ícone

Aqui ele mostra as fontes que você selecionou, inclusive pode acrescentar mais.

Revisão fontes selecionadas

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

endereço http

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 */
  /* ... */
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)