Custom Font never loading

I’m trying to use a custom font, but it never finishes loading.

My main component is

class MainScreen extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      loaded: false
    }
  }

  async componentDidMount () {
    await Expo.Font.loadAsync({
      'bignoodletoo': require('./assets/fonts/bignoodletoo.ttf')
    })
    this.setState({ loaded: true })
  }

  render () {
    return this.state.loaded ? (
      <Text style={{fontFamily: 'bignoodletoo'}}>Hello Expo Forum !</Text>      
      ...
    )
    : (
      null
    )
  }
}

My imports are

import React from 'react'

import {
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Image,
  TextInput,
  StyleSheet,
  AppRegistry
} from 'react-native'

import {
  StackNavigator
} from 'react-navigation'

import { Expo } from 'expo'

import {HeaderBasic, FullDate, FullDateMonthly} from './Components.js'

I can’t see where’s the problem, and it never loads, the main screen just stays blank.

i’ve got a kinda similar issue, so +1.

Me too, I have the same code as you (from the tutorial https://docs.expo.io/versions/latest/guides/using-custom-fonts.html#using-custom-fonts ) so +1.

White screen, it never loads the font

I have the same issue, so +1.

pretty strange. is the font ever actually loading? try printing after the font is loaded to see if there’s some error loading. followed the demo from scratch and seems to work

  async componentDidMount () {
    await Font.loadAsync({
      'raleway': require('./assets/fonts/Raleway-Regular.ttf')
    })
    console.log('font loaded!')
    this.setState({fontLoaded: true})
  }

I was using Redux and having a similar issue. I resolved it when I went through the Redux flow (dispatching an action and having a reducer that updated state, then passing it down to the component via mapStateToProps). In case thats helpful…

Has this been solved?
I got the same problem even I followed the expo doc. It keeps throwing the error
fontFamily "BreeSerif-Regular" is not a system font and has not been loaded through Font.loadAsync.

I have the same issue with my custom font :frowning_face:

someone has the solution?

I was having this same issue. I created a brand new project to test out the functionality of the documentation and that worked for me. I took the dependencies from the new package.json in tried them in my app. This fixed the issue and allowed the fonts to be loaded in my existing project.

Not sure the exact issue, but it seems that upgrading expo from 35.0.1 to 36.0.0 fixed it for me. I had to update a few other packages, but I suspect that was the one causing the trouble. The version of expo-font stayed at 8.0.0 for me.