はじめに
とあるクラファンプロジェクトのWebサイトをNext.jsで実装させていただきました。
サイトのデザイン上、Abobe Fontsを利用する必要があったのですが、どのようにNext.jsに導入したらいいのか少し悩んだのでこちらに対応方法を記載します。
対応方法
ReactのdangerouslySetInnerHTMLを利用して、
タグ内に記述することでAdobe FontをNext.jsのプロジェクトでも利用できます。
<Head>
<script
dangerouslySetInnerHTML={{
__html: `
.... // Adobe Fontのコードからコピー
`}}
/>
</Head>
Adobe Fontsを利用するまでの詳細手順
- Adobe Fontsのサイトを開く
- 利用したいフォントを検索し、フォントの詳細ページへ遷移
[Webプロジェクトに追加]のボタンをクリック
[Webプロジェクトに追加]のボタンをクリック
[新規でプロジェクトを作成]または、[既存のプロジェクトを選択]して、[保存]をクリック
Webページで利用するためのコードが表示されるので、コピーする
前述のようにNext.jsのHeadタグとscriptタグを入力
scriptタグのdangerouslySetInnerHTMLプロパティにコピーしたコードをペーストする
cssの
font-familyにfont-family: dnp-shuei-4go-std, sans-serif;のように追加したフォントを記述
=>
これで、Adobe Fontsで設定したフォントが利用できるようになります。
(Adobe Fonts利用するにはAdobeでサブスクリプション契約をする必要があるので、その点のみご注意ください)
最後に
これまでGoogle FontsぐらいしかWebフォントを使ってこなかったのですが、Adobe Fontsのフォントを利用するとかなりおしゃれなサイトが作れるのだなと学べて、いい経験になりました。
今回の学びを生かして、Next.jsやGatzbyでおしゃれなサイト/アプリケーションを色々作っていきたいです！