Next.js+Tailwind CSSの環境でGoogleフォントを設定してみました。

## はじめに
フォントってけっこう気になりません？私はとても気になります。ちょうど作成中のプロジェクトでデフォルトのフォントがあまり気に入らなかったのでGoogleフォントから好みのフォントを適用してみました。

## Googleフォント（Google Fonts）とは
Google社が提供するWeb上で利用できる無料（商用利用可）のフォントサービスです。[Wikipedia](https://en.wikipedia.org/wiki/Google_Fonts)によると、2010にサービスが開始され、2023年6月時点では1,527種類のフォントが提供されているようです。

## 利用方法
基本的には、1.使用したいフォントの選択、2.フォントの調整、3.プロジェクトへの反映の3ステップで利用できるので簡単です。
### 使用したいフォントの選択（1/3）
* まず[Googleフォント](https://fonts.google.com/)にアクセスして好きなフォントを選択しましょう。
* 今回は"Roboto"というフォントを選んでみます。選んだポイントは、、、何となくです。

### フォントの調整（2/3）
* 続いて選択したフォントを調整します。ここではフォントの重み（font-weight）、大きさ（font-size）、イタリックorNotの調整をします。
* 今回は"Light 300"というものを使ってみましょうかね。下画像の小さい赤枠の<strong><i>Select Light 300 +</i></strong>ボタンを押すと（現在選択済みなので`Remove~`と出てしまっていいますが）、画面右側の`Selected family`に、大きい赤枠の通り選択中のフォントが表示されます。※もし右側の`Selected Family`のモーダルが出てこない場合は、画面右上の四角形3つと十字のアイコンを選択すれば出てきます。この中の情報をNext.jsプロジェクト側で設定します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/googlefonts-nextjs-tailwindcss1_qvw2h4" />

 
### Next.jsプロジェクトへの反映（3/3）
#### pages/_app.jsの作成
* Googleフォントで選んだフォントをプロジェクト全体で利用するためには、まず`pages`ディレクトリ内に新しく`_app.js`というファイルを作成します。Next.jsの[documentation](https://nextjs.org/docs/basic-features/font-optimization#usage)内にもフォント追加ための同ファイル作成方法の記載があります。
<script src="https://gitlab.com/-/snippets/2567483.js"></script>
1. (l.1)Googleフォントで探し出した、使用したいフォントをインポートします。
2. (l.4)フォントの重みを決めます。今回は`font-weight`を300に指定します。
3. (l.5)フォントの変数を決めます。こちらは次に設定する`tailwind.config.js`から参照するために設定が必要な項目になります。

#### tailwind.config.jsへの追記
* 続いて`tailwind.config.js`を修正していきます。
<script src="https://gitlab.com/-/snippets/2567484.js"></script>
1. (l.8~l.11)`extend`内に`fontFamily`を用意し、その中で`pages/_app.js`で設定したフォントの変数を設定します。これでGoogleフォントを使うための設定は完了しました。

あとは下のようにクラス内に記述するだけで設定したフォントを適用できます。
```
<div className="font-roboto">こんにちは地元</div>;

```

## 注意
最後にこんなこと書くのもですが、2022年ドイツ、ミュンヘンの地裁でGoogleフォントがGDPR違反であるという判決を受けました。[The Hacker News](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)によると、ユーザーのIPアドレスが許可なくGoogleに送信されているからという理由のようです。GDPRというのは四方八方から横槍入れてくれますよね〜。司法だけに。

## まとめ・参考
<strong>絶対に</strong>日本国内からしかアクセスできない情報であれば現状問題はないと思いますが、GDPR絡みのこともあるので、ローカルでホストする方法を模索する必要もありそうです。
* [Next.js - Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
* [Wikipedia - Google Fonts](https://en.wikipedia.org/wiki/Google_Fonts)
* [The Hacker News - German Court Rules Websites Embedding Google Fonts Violates GDPR](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)