Styled Components + TypeScript + new fonts Issue

I want to use some font I've downloaded from the Google fonts on my React/TypeScript application. Unfortunatelly, I can not load the font.

I went through some articles describing the issue and how to handle it but with no luck. Take a look at the below files and let me know if there is something I'm missing:

I want to use the font here: Header.tsx

import React from "react";
import styled from "styled-components";
import headerBg from "../assets/pattern-bg.png";
import GlobalFonts from "../assets/fonts/fonts";

const Header: React.FC = () => {
  return (
    <HeaderSection className="header">
      <GlobalFonts />
      <InputWrapper>
        <MainHeading>IP Address Tracker</MainHeading>
        <label htmlFor="ip-input">
          <input type="text" id="ip-input" />
        </label>
      </InputWrapper>
    </HeaderSection>
  );
};

export default Header;

const HeaderSection = styled.header`
  background-image: url(${headerBg});
  width: 100%;
  height: 500px;
  display: block;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
`;

const MainHeading = styled.h1`
  margin: 0;
  color: white;
  font-family: "Rubik-Bold";
  // font-family: Rubik-Bold;
`;

const InputWrapper = styled.div``;

fonts.js

import { createGlobalStyle } from "styled-components";

import RubikBold from "./Rubik-Bold.ttf";

export default createGlobalStyle`
    @font-face {
        font-family: 'Rubik Bold';
        src: url('${RubikBold});
    }
`;

fonts.d.ts

declare module '*.woff';
declare module '*.ttf';

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "public/assets/Header.tsx", "fonts"]
}

file structure

src:
-assets
--fonts
---fonts.js
---Rubik-Bold.ttf
-components
--Header.tsx

from Recent Questions - Stack Overflow https://ift.tt/36giZQi
https://ift.tt/eA8V8J