Adding localfont on NextJS-TwinMacro website

GlobalStyles.js

'use client'
import { createGlobalStyle } from 'styled-components'
import tw, { theme, css, GlobalStyles as BaseStyles } from 'twin.macro'

const CustomStyles = createGlobalStyle`
@font-face {
  font-family: 'Lobster';
  src: url('fonts/Lobster.woff2') format('woff2');
  /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */
  font-display: fallback;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway.woff2') format('woff2');
  /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */
  font-display: fallback;
}
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/Bricolage.woff2') format('woff2');
  /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */
  font-display: fallback;
}
.lobster{
  font-family:"Lobster"
  text-3xl
  text-blue-500
}

#custom-font{
  font-family: 'Raleway'
}
h1{
  font-family: 'Lobster'
}
h2{
  font-family: 'Bricolage'
}
`

const GlobalStyles = () => (
  <>
    <BaseStyles />
    <CustomStyles />
  </>
)

export default GlobalStyles