adding custom Fonts to React-Native-Web

Question

im trying to integrate some fonts (FontAwesome, Roboto, ...) i started with FontAwesome

Folderstructure: Projectfolder

Projectfolder/assets/fonts/ // all ttf,eof,svg files here

Projectfolder/public/ // index.html and app css here

Projectfolder/web/ // webpack.config.js"

web/webpack.config.js:

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'),
  ],
};

app.css:

 #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;
  }
}

index.html:

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
    shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="app.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
  <script src="assets/bundle.js"></script>
</html>

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

are you sure about ".ttf.eot"? here - src: url("../assets/fonts/FontAwesome.ttf.eot"); — SpiRT, Oct 01 '18 at 15:17
@SpiRT Thanks but it was just a typo in the question not in the code — PrinzAndreVonLandmann, Oct 01 '18 at 15:31
https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects/41678350 — SpiRT, Oct 01 '18 at 16:04

score 0 · Answer 1 · answered Nov 26 '22 at 10:09

0

After a lot of research finally, I found the solution in this link:

vector icon not shown in react native for web

answered Nov 26 '22 at 10:09

mohammadhossein

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 29 '22 at 22:37
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33275082) – Rich Nov 30 '22 at 20:16

adding custom Fonts to React-Native-Web

web/webpack.config.js:

app.css:

index.html:

1 Answers1