Fonts Personalizadas no React Native CLI

Como Personalizar Fonts no React Native CLI.

Primeiro, vamos montar uma estrutura de pastas no nosso projeto (Estou utilizando o vscode).

Vamos criar a seguinte estrutura src > assets > fonts

A imagem abaixo demonstra como deve ficar depois de criado essa estrutura.

Depois de termos feito isso, devemos acessar o Google Fonts e escolher a font que queremos utilizar.

link do Google Fonts:
https://fonts.google.com

Eu escolhi a Roboto, você pode estar escolhendo outra.

Depois de ter escolhido a font, baixe ela e extraia o zip.

Quando você extrair, uma pasta vai ser gerada, igual a imagem abaixo.

Acesse essa pasta que foi gerada e dentro dela hávera pasta outra chamada de static, ela possui o conteúdo que nos interessa.

Copie tudo que está dentro dela e cole dentro da pasta fonts que criamos na estrutura de pastas do projeto.

Feito isso, vamos criar um arquivo de configuração na raiz do projeto.

O nome do arquivo é: react-native.confg.js

cole o seguinte conteúdo dentro dele:

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts'],
};

Essa configuração garante que as fonts personalizadas sejam disponibilizadas pelo nosso aplicativo.

Agora temos que executar o seguinte comando no terminal para fazer esse vínculo das fonts.

npx react-native-asset

Caso você esteja fazendo essa configuração para o Iphone, faça essas passos:

cd ios
pod install

Depois de ter feito isso, a font deve ter sido configurada corretamente e agora podemos utilizar nossa font customizada.

DEV Community