CODEWITHSUNDEEP
react-nativeexpo
nanquim
nanquim

Reputation: 1924

React Native / Expo - Custom font not working

I'm trying to use Lobster font in my project, so I:

  1. Added .ttf file downloaded from google fonts to /assets/fonts folder

  2. Created react-native.config.js:

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

  3. Run command react-native link -- received "success Assets have been successfully linked to your project"

  4. At my style object - fontFamily: 'Lobster-Regular'

But still is not working

Upvotes: 1

Views: 5935

Answers (3)

TheBetterJORT
TheBetterJORT

Reputation: 808

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import * as Font from 'expo-font';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  const fonts = {
    'test': require('./example.ttf'),
  };
  useEffect(() => {
    (async () => {
      try {
        await Font.loadAsync(fonts);
        setLoaded(true);
      } catch (err) {
        setError(err);
      }

    })();
  }), [fonts];

  if (error) return <View><Text>{error.message}</Text></View>;
  if (!loaded) return null;

  return (
    <View style={styles.container}>
      <Text>normal text</Text>
      <Text style={[styles.paragraph, { fontFamily: 'test' }]}>
        Test text!!!!
      </Text>
      <Card>
        <AssetExample />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Upvotes: 1

Soufiane Odf
Soufiane Odf

Reputation: 1112

If you are using expo, after this steps it should work:

step 1: put you Lobster-Regular.ttf file inside ./assets/fonts

step 2: Your file should be similar to this:

import React, { Component } from 'react'
import { Text, View} from 'react-native'
import * as Font from 'expo-font';

export default class App extends Component {

constructor(){
    super();
    this.state = {
        fontLoaded: false
    };
}

async componentDidMount(){
   await Font.loadAsync({
        'Lobster-Regular': require('./assets/fonts/Lobster-Regular.ttf'),
    });

    this.setState({ fontLoaded: true});
}

    render() {
        return (
            <View>
                {this.state.fontLoaded ? 
                <Text style={{fontFamily: 'Lobster-Regular'}}>hello everyone</Text>
                : <Text>not loaded</Text>
                }
            </View>
        )
    }
}

If you are using a bare react-native and the linking does not work maybe you should do it manually.

For android:

In your android/app/src/main folder structure you will create an assets folder with the fonts folder inside. In the fonts folder you will place your font files here.

For iOS the steps are a little bit longer you can follow this blog

Upvotes: 1

MJ Studio
MJ Studio

Reputation: 4611

Some times, your font file name not matched with real font name used in application check XCode info.plist enter image description here

Upvotes: 1

Related Questions