Lang x Lang

︙

Font Optimization

next/font は、あなたのフォント(カスタムフォントを含む)を自動的に最適化し、プライバシーとパフォーマンスの向上のために外部ネットワーク Request を削除します。

🎥 視聴： next/font の使用について詳しく学びましょう → YouTube (6 分間) 。

next/font は すぐにでも フォントファイル用の組み込み自動自己ホスティングを含みます。これは、基礎となる CSS の size-adjust プロパティのおかげで、最適にウェブフォントをロードし、layout シフトをゼロにすることができるということを意味します。

この新しいフォントシステムは、パフォーマンスとプライバシーを考慮して、すべての Google Fonts を便利に使用することが可能です。CSS とフォントファイルは build の時間にダウンロードされ、他の静的アセットと一緒に自己ホストされます。ブラウザから Google への Request は送信されません。

Google Fonts

Google Font を自動的に自己ホスティングします。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。ブラウザから Google に対する Request は送信されません。

next/font/googleから使用したいフォントを関数としてインポートして始めてください。最高のパフォーマンスと柔軟性を得るために、variable fonts の使用をお勧めします。

app/layout.tsx
import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}
app/layout.js
import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

あなたが variable フォントを使えない場合、weight を指定する必要があります：

app/layout.tsx
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}
app/layout.js
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

配列を使用して、複数のウェイトや styles を指定することができます:

app/layout.js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Good to know: フォント名に複数の単語を使用する場合は、アンダースコア(_)を使用します。例えば、Roboto Monoは Roboto_Monoとしてインポートすべきです。

サブセットの指定

Google Fonts は自動的に subset されます。これにより、 size のフォントファイルが縮小され、パフォーマンスが向上します。これらの subsets の中から、どれを preload するかを定義する必要があります。preload がtrueであるにも関わらず、任意の subsets を指定しないと、警告が表示されます。

これは、それを関数呼び出しに追加することによって実行できます：

app/layout.tsx
const inter = Inter({ subsets: ['latin'] })
app/layout.js
const inter = Inter({ subsets: ['latin'] })

詳細については、Font API Reference をご覧ください。

複数のフォントを使用する

あなたはアプリケーションで複数のフォントを import して使用することができます。取れるアプローチは 2 つあります。

最初のアプローチは、フォントを export し、インポートし、必要な場所でそのclassNameを適用するユーティリティ関数を作成することです。これにより、フォントはレンダリングされたときだけ事前にロードされることが確保されます：

app/fonts.ts
import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})
app/fonts.js
import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})
app/layout.tsx
import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/layout.js
import { inter } from './fonts'

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/page.tsx
import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}
app/page.js
import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

上記の例では、Interはグローバルに適用され、Roboto Monoは必要に応じてインポートして適用することができます。

あるいは、CSS variable を作成し、ご自身が好む CSS ソリューションと一緒に使用することもできます：

app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/layout.js
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/global.css
html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

上記の例では、Interは全体に適用され、<h1>タグはすべてRoboto Monoでスタイル設定されます。

推奨事項: 新しいフォントはそれぞれが client がダウンロードしなければならない追加のリソースであるため、複数のフォントを慎重に使用してください。

Local Fonts

Import next/font/local を指定し、ローカルのフォントファイルの src を指定します。最高のパフォーマンスと柔軟性を得るために、variable fonts の使用を推奨します。

app/layout.tsx
import localFont from 'next/font/local'

// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}
app/layout.js
import localFont from 'next/font/local'

// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

あなたが単一のフォントファミリーに対して複数のファイルを使用したい場合、srcは配列になることができます：

const roboto = localFont({
  src: [
    {
      path: "./Roboto-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./Roboto-Italic.woff2",
      weight: "400",
      style: "italic",
    },
    {
      path: "./Roboto-Bold.woff2",
      weight: "700",
      style: "normal",
    },
    {
      path: "./Roboto-BoldItalic.woff2",
      weight: "700",
      style: "italic",
    },
  ],
});

詳細については、Font API Reference をご覧ください。

With Tailwind CSS

next/fontは、Tailwind CSS とCSS variable を経由して使用することができます。

以下の例では、next/font/googleからフォントInterを使用しています(Google またはローカルフォントから任意のフォントを使用できます)。 CSS variable の名前を定義し、それをinterに割り当てるために、variableオプションを使用してフォントをロードします。その後、inter.variableを使用して、 CSS variable を HTML document に追加します。

app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}
app/layout.js
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

最後に、CSS variable を Tailwind CSS config に追加してください：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

あなたは今、font-sansおよびfont-monoユーティリティクラスを使用して、要素にフォントを適用することができます。

Preloading

あなたのサイトのページでフォント機能が呼び出されると、それはすべての routes で全体的に利用可能で事前に読み込まれるわけではありません。むしろ、それは使用されるファイルの type に基づいて関連する routes でのみ事前に読み込まれます:

  • もしそれがユニークなページであれば、そのページのためのユニークな route に先読みされます。
  • もし、それが layout であれば、その layout で包まれた全ての routes にあらかじめロードされています。
  • それが root layout であるなら、すべての routes に先行読み込みされます。

Reusing fonts

localFontまたは Google フォント機能を呼び出すたびに、そのフォントはあなたのアプリケーションで 1 つのインスタンスとしてホストされます。したがって、同じフォント機能を複数のファイルでロードすると、同じフォントの複数のインスタンスがホストされます。この状況では、以下のことを推奨します：

  • 共有ファイルの中でフォントの loader 関数を呼び出す
  • それを Export として定数で出力します
  • このフォントを使用したい各ファイルで Import 定数をインポートしてください

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use