Reactjs does not load the text font

Question

I am using React with Typescript and Styled-Component and I am not able to upload a text font, only the font does not load in the browser. What I have is the following ...

Fonts.ts:

import { css } from 'styled-components';

export const SpotifyFont = css`
    @font-face {
        font-family: 'Spotify-Light';
        src: url('assets/fonts/Spotify/Spotify-Light.eot');
        src: url('assets/fonts/Spotify/Spotify-Light.eot?#iefix') format('embedded-opentype'),
            url('assets/fonts/Spotify/Spotify-Light.woff2') format('woff2'),
            url('assets/fonts/Spotify/Spotify-Light.woff') format('woff'),
            url('assets/fonts/Spotify/Spotify-Light.ttf') format('truetype'),
            url('assets/fonts/Spotify/Spotify-Light.svg#Spotify-Light') format('svg');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
`;

GlobalStyle.ts:

import { createGlobalStyle } from 'styled-components';
import { SpotifyFont } from 'assets/styles/Fonts';
import { ResetLayout } from 'assets/styles/Reset';
import { Colors } from 'assets/styles/Colors';

export const GlobalStyle = createGlobalStyle`
    ${SpotifyFont}
    ${ResetLayout}
    ${Colors}

    html {
        @media (max-width: 720px) {
            font-size: 87.5%;
        }

        @media (max-width: 1080px) {
            font-size: 93.75%;
        }
    }

    body {
        font-family: 'Spotify-Light' !important;
        color: var(--grey-dark-1);
        background-color: white;
    }
`;

The path is set to absolute in tsconfig.json, "baseUrl": "src" and "include": ["src"].

My Directory

My Browser Info

Answer 1

I ended up spending a good few hours researching different places and found the following solution:

1 - Create a folder called types in src (To get better organized).

2 - Create a d.ts called fonts.d.ts and inside it insert the following code snippet:

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

declare module '* .svg' {
 // const content: React.FunctionComponent <React.SVGAttributes <SVGElement>>;
    const content: string;
    export default content;
}

3 - Add the following code snippet to the tsconfig.json file:

"compilerOption": {
  "baseUrl": "src",
   typeRoots ": ["node_modules/@types", "src/types"]
},
"include": ["src/**/*"]

4- Now to finish and not give the following error in the eslint "Parsing error: Invalid character", add the following code snippet in .eslintrc.js:

ignorePatterns: ['src/assets/fonts/*']

Now fonts can be imported smoothly in this way:

import FontNameEOT from 'assets/fonts/FONT_NAME/FONT_NAME.eot';
import FontNameTTF from 'assets/fonts/FONT_NAME/FONT_NAME.eot';
import FontNameWOFF2 from 'assets/fonts/FONT_NAME/FONT_NAME.eot';
import FontNameWOFF from 'assets/fonts/FONT_NAME/FONT_NAME.eot';

export const VAR_NAME = css`
    @font-face {
        font-family: 'FONT_NAME';
        font-weight: FONT_WEIGHT;
        font-style: normal;
        src: url('${FontNameEOT}');
        src: url('${FontNameEOT}')    format('embedded-opentype'),
             url('${FontNameTTF}')    format('truetype'),
             url('${FontNameWOFF2}')  format('woff2'),
             url('${FontNameWOFF}')   format('woff');
    }
`;