基本 2022-09-23

Googleフォントの使い方（Next.js + Tailwind CSS）

Language：

JavaScript TypeScript CSS

Framework/Library：

React Next.js Tailwind CSS

Technology：

環境構築スタイル

Platform/Tool：

Google Fonts
記事一覧へ

はじめに

フォントってけっこう気になりません？私はとても気になります。ちょうど作成中のプロジェクトでデフォルトのフォントがあまり気に入らなかったのでGoogleフォントから好みのフォントを適用してみました。

Googleフォント（Google Fonts）とは

Google社が提供するWeb上で利用できる無料（商用利用可）のフォントサービスです。Wikipediaによると、2010にサービスが開始され、2023年6月時点では1,527種類のフォントが提供されているようです。

利用方法

基本的には、1.使用したいフォントの選択、2.フォントの調整、3.プロジェクトへの反映の3ステップで利用できるので簡単です。

使用したいフォントの選択（1/3）

まずGoogleフォントにアクセスして好きなフォントを選択しましょう。
今回は"Roboto"というフォントを選んでみます。選んだポイントは、、、何となくです。

フォントの調整（2/3）

続いて選択したフォントを調整します。ここではフォントの重み（font-weight）、大きさ（font-size）、イタリックorNotの調整をします。
今回は"Light 300"というものを使ってみましょうかね。下画像の小さい赤枠のSelect Light 300 +ボタンを押すと（現在選択済みなのでRemove~と出てしまっていいますが）、画面右側のSelected familyに、大きい赤枠の通り選択中のフォントが表示されます。※もし右側のSelected Familyのモーダルが出てこない場合は、画面右上の四角形3つと十字のアイコンを選択すれば出てきます。この中の情報をNext.jsプロジェクト側で設定します。

Next.jsプロジェクトへの反映（3/3）

pages/_app.jsの作成

Googleフォントで選んだフォントをプロジェクト全体で利用するためには、まずpagesディレクトリ内に新しく_app.jsというファイルを作成します。Next.jsのdocumentation内にもフォント追加ための同ファイル作成方法の記載があります。

(l.1)Googleフォントで探し出した、使用したいフォントをインポートします。
(l.4)フォントの重みを決めます。今回はfont-weightを300に指定します。
(l.5)フォントの変数を決めます。こちらは次に設定するtailwind.config.jsから参照するために設定が必要な項目になります。

tailwind.config.jsへの追記

続いてtailwind.config.jsを修正していきます。

(l.8~l.11)extend内にfontFamilyを用意し、その中でpages/_app.jsで設定したフォントの変数を設定します。これでGoogleフォントを使うための設定は完了しました。

あとは下のようにクラス内に記述するだけで設定したフォントを適用できます。

<div className="font-roboto">こんにちは地元</div>;

注意

最後にこんなこと書くのもですが、2022年ドイツ、ミュンヘンの地裁でGoogleフォントがGDPR違反であるという判決を受けました。The Hacker Newsによると、ユーザーのIPアドレスが許可なくGoogleに送信されているからという理由のようです。GDPRというのは四方八方から横槍入れてくれますよね〜。司法だけに。

まとめ・参考

絶対に日本国内からしかアクセスできない情報であれば現状問題はないと思いますが、GDPR絡みのこともあるので、ローカルでホストする方法を模索する必要もありそうです。