expo: Can't use loaded fonts as per documentation

Following the Using Custom Fonts guide to load a custom font and then using fontFamily: 'my-font-name' in a StyleSheet always results in the following error message:

fontFamily ‘my-font-name’ is not a system font and has not been loaded through Exponent.Font.loadAsync.

However, if I use fontFamily: Font.style('my-font-name').fontFamily it works correctly. I’m not sure if this means the documentation is incorrect (maybe a breaking change was introduced recently?) or if this is some sort of bug.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

One thing that might help is in old versions of the documentation there should be a big warning banner at the top that says something about this version being outdated. Might cause people to look twice at the documentation version

ryanvanderpol on Jul 13, 2017

Hi All,

I’m having the same problem. Lost tow hours on this. Here is my code. Any idea?

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

import { Font } from 'expo';


export default class App extends Component{
    state = {
        ready: false,
    };

    componentDidMount(){
        this._loadAssetsAsync();
    }

    async _loadAssetsAsync(){
        try {
            await Font.loadAsync({
                'Roboto-Regular':require('./assets/fonts/Roboto-Regular.ttf')
            });
        }
        catch(e) {
            Log.error(e);
        }
        finally{
            console.log('Roboto is loaded:' + Font.isLoaded('Roboto-Regular'));
            this.setState({ready: true});
        }
    }

    render(){
        return (

                <View style={{flex:1,marginTop:100}}>

                    this.state.ready ? (
                    <Text style={{fontFamily:'Roboto-Regular'}}>New Font in Robotto</Text>
                    ) : null
                </View>
        )
    }
}

And My package.json

{
  "name": "test app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.13.2",
    "jest-expo": "26.0.0",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "apollo-cache-inmemory": "^1.1.12",
    "apollo-client": "^2.2.8",
    "apollo-link-http": "^1.5.4",
    "expo": "^26.0.0",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.1",
    "react": "16.3.0",
    "react-apollo": "^2.1.3",
    "react-native": "~0.54.1"
  }
}

AlexandreRoba on Apr 22, 2018

The project was created on v17 only about a month ago, so no upgrades have happened yet (although I see v18 is out now). Not sure how the old package is in there, but glad it’s solved now. Thanks for pointing me in the right direction!

ryanvanderpol on Jul 13, 2017