title: adding custom Fonts to React-Native-Web
body: <p>im trying to integrate some fonts (FontAwesome, Roboto, ...)
  i started with FontAwesome</p>
  
  <p>Folderstructure:
  Projectfolder</p>
  
  <p>Projectfolder/assets/fonts/    // all ttf,eof,svg files here</p>
  
  <p>Projectfolder/public/          // index.html and app css here</p>
  
  <p>Projectfolder/web/             // webpack.config.js"</p>
  
  <h3>web/webpack.config.js:</h3>
  
  <pre><code>const appDirectory = path.resolve(__dirname, './../');
  
  
    test: /\.js$/,
     include: [
  
      path.resolve(appDirectory, './assets'),
  
  {...}
  
  const ttfLoaderConfiguration = {
    test: /\.ttf$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: './fonts/[hash].[ext]',
        },
      },
    ],
    include: [
      path.resolve(appDirectory, './src/assets'),
      path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
      path.resolve(appDirectory, './assets'),
    ],
  };
  </code></pre>
  
  <h3>app.css:</h3>
  
  <pre><code> #root {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
  
    @font-face {
     font-family: "FontAwesome";
      src: url("../assets/fonts/FontAwesome.eot");
      src: url("../assets/fonts/FontAwesome.eot") format("embedded-opentype"),
           url("../assets/fonts/FontAwesome.woff2") format("woff2"),
           url("../assets/fonts/FontAwesome.woff") format("woff"),
           url("../assets/fonts/FontAwesome.ttf") format("truetype"),
           url("../assets/fonts/FontAwesome.svg") format("svg");
      font-weight: normal;
      font-style: normal;
    }
  }
  </code></pre>
  
  <h3>index.html:</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, 
      shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;link rel="manifest" href="manifest.json"&gt;
      &lt;link rel="shortcut icon" href="favicon.ico"&gt;
      &lt;link rel="stylesheet" href="app.css"&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;script src="assets/bundle.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the only result im getting ist this:
  has someone experience with such a situation and tell me how to do it? or what i am doing wrong</p>
  
  <p><a href="https://i.stack.imgur.com/WNGFo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WNGFo.png" alt="Result"></a></p>