zeekrey/nextjsLoadFont.md

## nextjsLoadFont.md

      
    Raw
  

              nextjsLoadFont.md
            
          
Convert font file to woff2.
Create a folder called 'fonts' within the public folder.
Past all needed fonts there.
Create a font.css file within this folder and use the follwing code:

@font-face {
  font-family: "Museo Sans";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: local("Museo Sans 500"),
    url("/fonts/MuseoSans_500.woff2") format("woff2");
  /* url('./fonts/K2D.woff') format('woff'), */
  /* url('./fonts/K2D.ttf') format('truetype'), */
  /* url('./fonts/K2D.eot') format('embedded-opentype'); */
}


Within a custom document.tsx file use the following code:

<Head>
          <link
            rel="preload"
            href="/fonts/MuseoSans_300.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="true"
          />
          <link
            href="/fonts/font.css"
            type="text/css"
            rel="stylesheet"
            media="screen,print"
          />
        </Head>


Use the font.