【Next.js】WEBフォントを使う方法まとめ｜Google Fonts
2023/1/29
2023/1/29
最近Next.jsでWEBフォントを使いたい場面があり、Google Fontsを読み込んで表示する実装をしました。
今回は、そのNext.jsでGoogle Fontsにあるフォントを利用するための方法をまとめていきます。
【参考】Basic Features: Font Optimization | Next.js
目次
手順1）@next/fontをインストールする
$ npm i @next/font手順2）Google Fontsを探す
「Google Fonts」のサイトにアクセスして、使いたいフォントを検索して探していきます。
（今回は「DotGothic16」というフォントを使用してみます。）
手順3）Next.jsでGoogle Fontsを読み込む
「_app.tsx」でGoogleFontsをインポートする
先ほど選んだフォントを_app.tsxでimportして読み込んでいきます。
import '../styles/globals.css'
import type {AppProps} from 'next/app'
import {DotGothic16} from "@next/font/google";
// Google Fonts読み込み
const dot = DotGothic16({
weight: "400", // 1) フォントの太さを指定
subsets: ['latin'], // 2) 使用する文字セットを指定
variable: '--font-dots', // 3) CSSで使用する変数名を指定
preload: false, // 4) false:読み込みを遅らせる
})
function MyApp({Component, pageProps}: AppProps) {
return (
<>
<style jsx global>{`:root {--font-dots: ${dot.style.fontFamily};}`}</style>
<Component {...pageProps} />
</>
)
}
export default MyApp
CSSのfont-familyで指定する
使いたい部分のcssに先ほど指定したフォントを追加します。
body {
font-family: var(--font-dots);
}以上で、Next.jsでGoogle Fontsを使うことができるようになります。
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12