Skip to content

Instantly share code, notes, and snippets.

@zeekrey

zeekrey/nextjsLoadFont.md

Last active January 7, 2021 11:32
Show Gist options
  • Save zeekrey/02197eab1c1ff445f5cf9e2874fb84f0 to your computer and use it in GitHub Desktop.
Save zeekrey/02197eab1c1ff445f5cf9e2874fb84f0 to your computer and use it in GitHub Desktop.
Download ZIP
Load fonts in a Next.js
Raw
nextjsLoadFont.md
  1. Convert font file to woff2.
  2. Create a folder called 'fonts' within the public folder.
  3. Past all needed fonts there.
  4. 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'); */
}
  1. 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>
  1. Use the font.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment