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
– SpiRT, Commented Oct 1, 2018 at 15:17
@SpiRT Thanks but it was just a typo in the question not in the code — PrinzAndreVonLandmann
– PrinzAndreVonLandmann, Commented Oct 1, 2018 at 15:31

mohammadhossein · Accepted Answer · 2022-11-26 10:09:56Z

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, 2022 at 10:09

mohammadhossein

212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Community Over a year ago

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.

Rich Over a year ago

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

Collectives™ on Stack Overflow

adding custom Fonts to React-Native-Web

web/webpack.config.js:

app.css:

index.html:

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

web/webpack.config.js:

app.css:

index.html:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related