0

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.

Chucksterv
  • 47
  • 7
  • have a look here [How to add fonts to create-react-app based projects](https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects?answertab=createdasc#tab-top) – Dhaifallah Mar 21 '22 at 01:45

0 Answers0