'How can I add fonts to a react project using styled components?

so I've been trying to add a local font to a react project using styled components for a while now. I came across a lot of similar questions with answer and just articles on the net in general but none of those solutions seem to work. My current code is this.

import { createGlobalStyle } from "styled-components";
import OpenSansTTF from './OpenSans-VariableFont_wdth,wght.ttf';

const GlobalStyles = createGlobalStyle `
    @font-face {
        font-family: 'Open Sans';
        src: url(${OpenSansTTF}) format ('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: auto;

    }

    h1 {
        font-family: 'Open Sans', serif;
        color:red;
        font-size: 5em;
    }
`

export default GlobalStyles;

I've imported this filed in my App.js and added it. The other h1 styles are working and it's being displayed as a serif font. Not sure how I can fix this.

cssreactjsframeworksstyled-components


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions