Load custom font NextJS

gistfile1.txt

1. Add the font on the /public folder. Just .woff2 extension is good enough https://caniuse.com/?search=woff2
 1.1. If you have a problem regarding vertical alignment, use https://transfonter.org/ and select "fix vertical metrics" 
2. Import the font with CSS @font-face like below:
```css
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
```
3. Optimize the font by preloading it. Add the snipet on _Document file:
```jsx
<link
  rel="preload"
  href="/fonts/BebasNeue/BebasNeue-Regular.woff2"
  as="font"
  crossOrigin=""
/>
```
4. Not needed to add any caching mecanism. Nextjs takes care of it for static assets. More details here: https://nextjs.org/docs/going-to-production#caching
5. Make sure to test it on different browsers (safari, chrome, firefox and edge) with https://app.lambdatest.com/console/realtime/browser