'Can't resolve font path using styled-components

I am trying to include a google font Epilogue to my project using @font-face and styled-components. I created GlobalStyle.style.jsat the /src folder and imported it to my App.js. I seem to be doing something wrong with the @font-face because I keep getting this error on my browser:

Compiled with problems:

ERROR in ./src/GlobalStyle.style.js 4:0-57

Module not found: Error: Can't resolve './assets/fonts/Epilogue-Medium.tff' in 'D:\projects\React\Styled components\styled-components\src'


ERROR in ./src/GlobalStyle.style.js 5:0-55

Module not found: Error: Can't resolve './assets/fonts/Epilogue-Bold.tff' in 'D:\projects\React\Styled components\styled-components\src'

My GlobalStyle.style.js has

import styled, { createGlobalStyle } from "styled-components"
import Font500 from "./assets/fonts/Epilogue-Medium.tff"
import Font700 from "./assets/fonts/Epilogue-Bold.tff"

const GlobalStyle = createGlobalStyle `

    @font-face {
        font-family: Epilogue-500;
        src: url(${Font500}) format('tff');
    }
    @font-face {
        font-family: Epilogue-700;
        src: url(${Font700}) format('tff');
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Epilogue-700;
        font-size: 1.125rem;
    }

`

export const MainContainer = styled.div `
    width: 100%;
    background-color: white;
`

export default GlobalStyle

My App.js

import GlobalStyle from "./GlobalStyle.style"
import { MainContainer } from "./GlobalStyle.style"

function App() {
  return (
    <MainContainer >
      <GlobalStyle />
      <p>This should have the Epilogue font</p>
    </MainContainer>
  );
}

export default App;

The <p> should have the Epilogue font

cssreactjsstyled-components


Solution 1:[1]

In your case it would be awesome if you could share a code sandbox or smth similar.

According to your description the font would need to be at src/assets/fonts/Epilogue-Medium.tff is that the case?

If they are not, thats the reason. If they already are there maybe it helps to try to use absolut paths like

import Font700 from "src/assets/fonts/Epilogue-Bold.tff"

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Laurenz Honauer

Related Questions