title: Custom font not working in React Native
body: <p>I want to use a font from google fonts in my app. <a href="https://fonts.google.com/?selection.family=Orbitron&amp;query=orbitron" rel="noreferrer">Here is the font</a>.</p>
  
  <p>I have placed the .ttf file in <code>app/fonts</code>. </p>
  
  <p>package.json:</p>
  
  <pre><code>{
      "name": "xxx",
      "version": "0.0.1",
      "private": true,
      "scripts": {
          "start": "node node_modules/react-native/local-cli/cli.js start",
          "test": "jest"
      },
      "rnpm": {
          "assets": ["./app/fonts"]
      },
      "jest": {
          "preset": "react-native",
          "moduleNameMapper": {
              "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "&lt;rootDir&gt;/__mocks__/fileMock.js",
              "\\.(css|less)$": "&lt;rootDir&gt;/__mocks__/styleMock.js"
          }
      },
      "dependencies": {
          "flow-typed": "^2.0.0",
          "immutable": "^3.8.1",
          "react": "~15.4.1",
          "react-native": "0.42.0",
          "react-native-vector-icons": "^4.0.0",
          "react-redux": "^5.0.3",
          "redux": "^3.6.0",
          "redux-immutable": "^4.0.0",
          "redux-observable": "^0.14.1",
          "rxjs": "^5.2.0"
      },
      "devDependencies": {
          "babel-eslint": "^7.1.1",
          "babel-jest": "19.0.0",
          "babel-preset-react-native": "1.9.1",
          "eslint": "^3.17.0",
          "eslint-plugin-flowtype": "^2.30.3",
          "eslint-plugin-jsx": "^0.0.2",
          "eslint-plugin-react": "^6.10.0",
          "eslint-plugin-react-native": "^2.3.1",
          "flow-bin": "^0.42.0",
          "jest": "19.0.2",
          "jest-cli": "^19.0.2",
          "react-test-renderer": "~15.4.1",
          "redux-devtools": "^3.3.2",
          "remote-redux-devtools": "^0.5.7"
      }
  }
  </code></pre>
  
  <p>then ran <code>react-native link</code>.</p>
  
  <p>Then use the font in my app:</p>
  
  <pre><code>import { View, Text } from 'react-native'
  import React from 'react'
  import Width from '../width/Width'
  import Shape from '../shape/Shape'
  import Height from '../height/Height'
  import Thickness from '../thickness/Thickness'
  
  export const Volcalc = () =&gt; (
    &lt;View style={styles.container}&gt;
      &lt;Text style={styles.text}&gt;SHAPE&lt;/Text&gt;
      &lt;Shape /&gt;
      &lt;Text style={styles.text}&gt;HEIGHT&lt;/Text&gt;
      &lt;Height /&gt;
      &lt;Text style={styles.text}&gt;WIDTH&lt;/Text&gt;
      &lt;Width /&gt;
      &lt;Text style={styles.text}&gt;THICKNESS&lt;/Text&gt;
      &lt;Thickness /&gt;
    &lt;/View&gt;
  )
  
  const $mainColor = '#00d1b2'
  const styles = {
    container: {
      flex: 1,
      padding: 20,
      backgroundColor: $mainColor
    },
    text: {
      textAlign: 'center',
      color: 'rgba(255, 255, 255, 0.9)',
      fontSize: 15,
      fontFamily: 'Orbitron'
    }
  }
  </code></pre>
  
  <p>In android it doesn't show the new font but has no error. In ios it has error:  </p>
  
  <blockquote>
    <p>Unrecognised font family "Orbitron"</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>
  
  <p>How do I find out the EXACT value to place in <code>fontFamily: 'xxx'</code>?</p>