Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/mui_use_google_fonts.md

Created October 4, 2022 00:35
Show Gist options
  • Save LeeDDHH/823cd2063f7a7df1ece4e219334840bb to your computer and use it in GitHub Desktop.
Save LeeDDHH/823cd2063f7a7df1ece4e219334840bb to your computer and use it in GitHub Desktop.
Download ZIP
CDNのGoogle FontsをMaterial UIで扱う
Raw
mui_use_google_fonts.md

前提

  • 以下の環境で動作を確認
node.js 16.17.0
npm 8.15.0
next.js 12.3.1
react 18.2.0
@mui/material 5.10.6

やったこと

使用する Google Fonts を選定する

使用する Google Fonts を _document.tsx に導入する

  • 使用するフォントのlinkをコピーする google fonts link
  • _document.tsx の Head 内にlinkを貼り付ける
    • crossOrigin 属性は、空の文字列として指定する google fonts link crossOrigin

theme.ts に fontFamily を指定する

  • 使用するフォントの名前を指定する
    • フォント名にスペースがある場合、 '"スペースがある　フォント名"' という形で指定する google fonts name has space

Font Optimization を適用する

  • next.config.js の module に以下を追加
    • optimizeFonts: true next.config.js optimizeFonts

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment