CODEWITHSUNDEEP
cssreactjsstyled-components
Steen Toons
Steen Toons

Reputation: 69

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

Upvotes: 1

Views: 2618

Answers (1)

Laurenz Honauer
Laurenz Honauer

Reputation: 344

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"

Upvotes: 1

Related Questions