ReactでAdobeFontsを使いたい！

はじめに

ReactでAdobeFontsを使うためにまとめました。
最終的にこんな感じになります。

そもそもAdobeFontsって？

https://fonts.adobe.com/

豊富なフォントの中からお気に入りのフォントをサクッと探して、手軽に適用できる素晴らしいWebフォントサービスです。

開発環境

VsCode
npm 6.12.1

セットアップ

Adobeアカウント作成

https://fonts.adobe.com/
上記サイトへアクセスして、アカウントを作成しましょう。

AdobeFontsからお気に入りのフォントを見つけて、プロジェクトに追加する

次に、お気に入りのフォントを見つけましょう。
見つけたら、下画像にマークしてあるコードアイコンを押します。

ウィンドウが出てくるので、プロジェクトを新規作成し、保存ボタンを押下しましょう。

すると、Webサイトからフォントを読み込むためのLinkタグとCssが表示されます。
これでAdobeFonts側の準備は完了です。

Reactプロジェクトからフォントを読み込み、適用する。

先ほど確認したLinkタグをコンポーネントのreturn()内に配置します。

ShopPage.js

import React from "react";
import "./ShopPage.css";

export function ShopPage() {
  return (
    <div className="ShopPage">
      <link rel="stylesheet" href="https://use.typekit.net/wrq6syh.css"></link>
      <div className="top-title-background w-screen bg-red-800 text-white p-4">
        <div className="flex">
          <div className="w-1/2">
            <p className="-mb-8">Shop</p>
            <p className="-mb-8">Sample</p>
            <p className="-mb-8">Page</p>
          </div>
          <div className="discription w-1/2 h-auto">
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
          </div>
        </div>
      </div>
      <div className="intro">
        <h1>Introduction</h1>
      </div>
    </div>
  );
}

次にCssを適用します。

ShopPage.css

.top-title-background {
  height: 25rem;
  font-family: bungee, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 6rem;
}

.discription {
    font-family: fira-sans,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}

body{
    background-color: #e7e7b8;
}

h1{
  font-family: bungee, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 2.5rem;
}

動作確認

これで完了です。
サーバを立てて確認してみましょう。

こんな感じになります。

終わりに

webフォントってめちゃめちゃ便利ですね。
ただローカルで開発する場合、ネット環境がないとフォントを読み込めないネックですけど。