4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Next.js(React)でAbobeフォントを使いたい!

Last updated at Posted at 2021-11-06

はじめに

とあるクラファンプロジェクトのWebサイトをNext.jsで実装させていただきました。
サイトのデザイン上、Abobe Fontsを利用する必要があったのですが、どのようにNext.jsに導入したらいいのか少し悩んだのでこちらに対応方法を記載します。

対応方法

ReactのdangerouslySetInnerHTMLを利用して、

タグ内に記述することでAdobe FontをNext.jsのプロジェクトでも利用できます。
 
<Head>
  <script
    dangerouslySetInnerHTML={{
      __html: `
      .... // Adobe Fontのコードからコピー
        `}}
  />
</Head>

Adobe Fontsを利用するまでの詳細手順

  1. Adobe Fontsのサイトを開く

  2. 利用したいフォントを検索し、フォントの詳細ページへ遷移

  3. [Webプロジェクトに追加]のボタンをクリック
    adobe-fonts.png

  4. [Webプロジェクトに追加]のボタンをクリック

  5. [新規でプロジェクトを作成]または、[既存のプロジェクトを選択]して、[保存]をクリック

  6. Webページで利用するためのコードが表示されるので、コピーする
    adobe-fonts2.png

  7. 前述のようにNext.jsのHeadタグとscriptタグを入力

  8. scriptタグのdangerouslySetInnerHTMLプロパティにコピーしたコードをペーストする

  9. cssのfont-familyfont-family: dnp-shuei-4go-std, sans-serif; のように追加したフォントを記述

=>
これで、Adobe Fontsで設定したフォントが利用できるようになります。
(Adobe Fonts利用するにはAdobeでサブスクリプション契約をする必要があるので、その点のみご注意ください)

最後に

これまでGoogle FontsぐらいしかWebフォントを使ってこなかったのですが、Adobe Fontsのフォントを利用するとかなりおしゃれなサイトが作れるのだなと学べて、いい経験になりました。

今回の学びを生かして、Next.jsやGatzbyでおしゃれなサイト/アプリケーションを色々作っていきたいです!

参考

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?