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