title: Fonts are loaded but not applied in create-react-app with typescript and styled-components
body: <p>I am trying to import custom fonts inside my create-react-app project with styled components and typescript. The problem is that they load successfully, but the fonts are not applied to the texts. I have already searched almost everything on google, found some solutions which didn't work for me.
  When I am inserting CDN inside an HTML file in a public folder it works perfectly, but with this approach, it doesn't work.</p>
  <pre><code>    // inside webpack config rules
      {
        test: /\.(woff2|woff|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              limit: 10000,
              mimetype: 'application/font-woff',
            },
          },
        ],
      },
  
  
  // fonts.d.ts
  declare module '*.woff2';
  declare module '*.ttf';
  
  // typography.ts
  import NunitoTtf from '../../fonts/Nunito.ttf';
  import NunitoWoff2 from '../../fonts/Nunito.woff2';
  import NunitoSansTtf from '../../fonts/NunitoSans.ttf';
  import NunitoSansWoff2 from '../../fonts/NunitoSans.woff2';
  
  export const typography = css`
    @font-face {
      font-family: 'Nunito Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Nunito Sans'), local('NunitoSans')
        url(${NunitoSansTtf}) format('truetype'),
        url(${NunitoSansWoff2});
    }
  
    @font-face {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 400;
      src: local('Nunito'),
        url(${NunitoTtf}) format('truetype'),
        url(${NunitoWoff2});
    }
  
    body {
      color: ${colors.blackLight};
      font-size: ${fontSizes.large};
      font-family: 'Nunito Sans', 'Nunito', sans-serif;
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  
  
  export const GlobalStyles = createGlobalStyle`
      ${normalize}
      ${typography}
      ${scrollbars}
  
      html {
          height: 100%;
          background: #F8F8F8;
          padding: 0;
          margin: 0;
          position: relative;
      }
  
      body {
          overflow: hidden;
  
          &amp; &gt; div#root {
              height: 100%;
  
              &amp; &gt; div.container {
                  height: 100%;
              }
          }
      }
  `;
  
  
  .
  ├── config
  │   ├── env.js
  │   ├── getHttpsConfig.js
  │   ├── jest
  │   │   ├── cssTransform.js
  │   │   └── fileTransform.js
  │   ├── modules.js
  │   ├── paths.js
  │   ├── pnpTs.js
  │   ├── webpack.config.js
  │   └── webpackDevServer.config.js
  ├── package.json
  ├── package-lock.json
  ├── public
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── logo192.png
  │   ├── logo512.png
  │   ├── manifest.json
  │   └── robots.txt
  ├── README.md
  ├── scripts
  │   ├── build.js
  │   ├── start.js
  │   └── test.js
  ├── src
  │   ├── app
  │   ├── App.tsx
  │   ├── global.d.ts
  │   ├── index.tsx
  │   ├── static
  │   │   ├── fonts
  │   │   │   ├── NunitoSans.ttf
  │   │   │   ├── NunitoSans.woff2
  │   │   │   ├── Nunito.ttf
  │   │   │   ├── Nunito.woff2
  │   │   ├── styles
  │   │   │   ├── global
  │   │   │   │   ├── index.ts
  │   │   │   │   └── typography.ts
  │   │   │   ├── utils
  │   │   │   │   └── mixins.ts
  │   │   │   └── variables
  │   │   │       ├── colors.ts
  │   │   │       ├── font-sizes.ts
  │   │   │       ├── index.ts
  │   │   │       └── layout.ts
  │   │   └── theme.ts
  │   └── store.ts
  ├── tsconfig.json
  
  
   `
  </code></pre>
  <p>It's not an obvious thing what could be wrong.</p>