0

Estou tentando a algum tempo adicionar fontes ao meu projeto react-native mas não obtive sucesso seguindo tutoriais da net.

estou tentando usar as fontes assim:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text
        style={{
          fontFamily: 'LobsterTwo'
        }}
      >App</Text>
    </View>
  );
}

export default App;

Criei a pasta "assets" na raíz do meu projeto e dentro tem o diretorio fonts com as fontes baixadas:

inserir a descrição da imagem aqui

Meu arquivo react-native.config.js:

module.exports = {
  assets: ['./assets/fonts/'],
};

Executei o react-native link e inciei o app, ja chamei as fontes de todas as formas diferentes, com traços, junto, separado e mesmo assim não funciona. Agradeço se alguem ajudar, sou extremamente iniciante em React Native e estou perdido.

4 Respostas 4

3

Considere que você deve importar a fonte, e não simplesmente utilizar ela. Você pode importar tanto direto do site fonte no index.html, ou como o arquivo na pasta no CSS de preferência o css global do projeto.

Coloquei abaixo as duas formas:

Coloca no seu arquivo INDEX.HTML o import direto do site da fonte como:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" rel="stylesheet">

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>DevFlix</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Outra opções é o import no CSS Global do projeto como:

  • Lembre-se que para importar, considere o caminho completo, nome do arquivo (do jeito que estiver escrito) e a extensão.

    @font-face { font-family: 'Westline Script Demo'; font-style: normal; font-weight: bold; src: url('./assets/fonts/westlineScript.otf'); }

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import "./global.css";

import Main from './main/Main';

function App() {
  return (
    <>
      <Router>
        <Main />
      </Router>
    </>
  );
}

export default App;
@font-face {
  font-family: 'Westline Script Demo';
  font-style: normal;
  font-weight: bold;
  src: url('./assets/fonts/westlineScript.otf');
}
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font: 400 14px "Inconsolata", sans-serif;
  background: #F9DFDE;
  -webkit-font-smoothing: antialiased;
}

span,
p,
h1,
a {
  font: "Inconsolata", sans-serif;
}

button {
  cursor: pointer;
}

1

Ola,

Fiz um passo a passo para você conseguir instalar e usar a fonte customizada.

  1. Faz download da fonte que deseja usar no google fonts, no exemplo vou usar a Poppins.
  2. Na raiz do projeto cria a seguinte estrutura /assets/fonts.
  3. Na ra do projeto cria o arquivo react-native.config.js com o seguinte conteudo.
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};
  1. Executa o comando react-native-link, nesse momento as fontes foram instaladas.
  2. Execute o yarn react-native ios ou yarn react-native android para reinstalar o app.
  3. Para usar a fonte, deve usar todo o nome do arquivo .ttf, exemplo para a fonte Poppins-Regular.ttf, você define fontFamily: 'Poppins-Regular'.

As fontes do react-native, tem algo um pouco desconfortavel, como o react-native não herda estilo, em todos os textos você precisa definir, a sua familia de fontes, mais isso pode ser contornado.

Segue o passo a passo para resolver isso.

  1. Na raiz do projeto crie o arquivo override.js com o seguinte conteudo.
import React from 'react';
import { Text, TextInput, StyleSheet } from 'react-native';

import theme from './src/global/theme';

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: 'Poppins-Regular'
  },
});

const override = () => {
  const oldTextRender = Text.render;
  Text.render = (...args) => {
    const origin = oldTextRender.call(this, ...args);
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
      allowFontScaling: false,
    });
  };

  const oldTextInputRender = TextInput.render;
  TextInput.render = (...args) => {
    const origin = oldTextInputRender.call(this, ...args);
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
      allowFontScaling: false,
    });
  };
};

export default override;

Deve trocar o Poppins-Regular pela sua familia de fonte instalada. 2. No arquivo index.js, deve colocar o seguinte código.

import override from './override';

override();

O que fez acima foi sobreescrever o estilo padrão do Text e TextInput e agora toda vez que você colocar um Text ou TextInput eles já teram a fonte X por padrão.

3
  • Poderia exemplificar como ficaria no arquivo index.js?
    – Eric
    Commented 4/01/2022 às 19:26
  • É só fazer a importação e chamada igual descrito acima. Commented 11/02/2022 às 11:03
  • Olá @IuryBrasileiro eu encontrei um post mais recente falando sobre como aplicar fontes customizadas em projetos react-native mais recentes(>= 0.69) dê uma olhada no link blog.logrocket.com/adding-custom-fonts-react-native , acredito que irá auxiliar bastante para projetos novos. Nele explica tanto para projetos novos como antigos e projetos com expo Commented 26/10/2022 às 23:17
0

Primeiro, o Google não indica usar o nome da fonte como vc usou

O Correto é 'Lobster Two', e não 'LobsterTwo',

Outra dica é vc criar um StyleSheet.create e usar a fonte adicionando uma classe ao texto como nesse exemplo.

<Text style={styles.fonteGoogle}>
  seu texto
</Text>


const styles = StyleSheet.create({
  fonteGoogle: {
    fontFamily: 'Lobster Two',
  },
})

Talvez esse artigo possa te ajudar: https://medium.com/tableless/fontes-customizadas-no-react-native-baa64f1fda6f

0

Na verdade tu tem que fazer a linkagem das dependências das tuas fontes ao teu projeto.

Dentro da pasta android/app/src tu vai criar uma pastas assets/fonts e dentro dela tu vai colar as tuas fontes.

Sendo assim, vai funcionar tudo normal.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .