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) {
    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>      
    : (

My imports are

import React from 'react'

import {
} from 'react-native'

import {
} 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 ) 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.