javascript - Importera egna teckensnitt i Next JS 13

Jag har problem med att lista ut hur man importerar anpassade typsnitt i Next JS 13. Det första problemet är att Next JS-dokumentationen har ett grundligt exempel på hur man gör detta med Google Fonts, men de nämner ingenting om att använda Typekit. Den andra saken är att nästan ALLA exempel online som jag har sett på detta påstår sig använda Next JS 13, men de missar alla skillnaden mellan den nya App-katalogen och den gamla Pages-katalogen. Enligt Next JS 13-dokumentationen angående typsnitt:

Medan inline-CSS fortfarande fungerar på sidor (Next.js v. 12), fungerar det inte i app (Next.js v. 13). Du bör istället använda next/font.

Så, här är dokumentationen som pratar om denna nya next/font-metod för version 13: https://nextjs.org/docs/app/building-your-application/optimizing/fonts

Men denna dokumentation visar bara hur man använder Google Fonts; till och med videon högst upp på sidan visar dem använda den gamla pages-katalogen.

Så, hur kan jag importera och använda anpassade TYPEKIT-typsnitt i Next.JS 13 med den nya next/font-metoden för den nya App-katalogen?

Svar #1

Jag tror att det du är ute efter är Next.js lokala typsnitt

Kopiera dina typsnitt till ditt projekt någonstans. Du kan placera dem tillsammans med din tema-/varumärkeskod, men jag tycker om att lägga dem i en public/fonts-mapp eftersom det är lättare att referera till dem i min storybook-konfiguration.

Skapa en fil som fonts.ts och exportera din fontkonfiguration

import localFont from "next/font/local";

export const MyCustomFont = localFont({
  // Define a css variable to use down the line --> e.g. font-family: var(--my-custom-font)
  variable: "--my-custom-font",
  // Define variants for your font. 
  // weight = "font-weight". will use the matching variant when you
  // set font-weight CSS prop on your text elements
  src: [
    {
      path: "path/to/public/fonts/MyCustomFont-Book_Web.woff2", 
      weight: "350",
      style: "normal",
    },
    {
      path: "path/to/public/fonts/fonts/MyCustomFontNarrow-Bold_Web.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "path/to/public/fonts/fonts/MyCustomFont-Bold_Web.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  // Or, you can define a single font instead e.g.
  // src: "path/to/public/fonts/MyCustomFont-Book_Web.woff2"
});

Referera till ditt lokala typsnitt i din tema/CSS.

Exempel med Material UI:

// theme.ts
import { createTheme } from "@mui/material/styles";
import { MyCustomFont } from "./path/to/fonts";

export const theme = createTheme({
  typography: {
    fontFamily: MyCustomFont.style.fontFamily
  }
})

<Typography fontWeight={350}>My Custom Font Book</Typography>
<Typography fontWeight={500}>My Custom Font Narrow</Typography>
<Typography fontWeight={700}>My Custom Font Bold</Typography>

Exempel med Tailwind

// app/layout.tsx
import { MyCustomFont } from "./path/to/fonts";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${MyCustomFont.variable}`}>{children}</body>
    </html>
  )
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ ... ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--my-custom-font)'],
      },
    },
  },
  plugins: []
}

Hoppas detta besvarar din fråga!

Svar #2

Logga in på ditt Adobe Creative Cloud. Synkronisera typsnitt till ditt CC-konto. På Windows gå till

C:\Users\YOURNAME\AppData\Roaming\Adobe\CoreSync\plugins\livetype\r\

OSX: Macintosh

HD/Users/YOURNAME/Library/Application Support/Adobe/CoreSync/plugins/livetype/.r/

Där hittar du alla dina Typekit-teckensnittsfil(er) lokalt, som är synkroniserade med ditt CC. Byt namn på filen/filerna till .ttf.

Importera den filen till din Next.js-projektmapp. Använd sedan Next.js lokala fontoptimering.

import localFont from '@next/font/local'
const myFont =localFont({src:*font_file_path* })

Relaterade artiklar