ReactでGoogleFonts使ってみた

この記事ではweb分野始めて二か月ほどの初心者がReactでGoogleFontを使う方法をメモしたものです。フレームワークでNext.jsを使ってます。

適応前の状態

適応前のコードはこんな感じ

titleのところに文字が入る予定です。今回はtitle="ABOUT"にしてみました。
適応前のフォントはこんな感じ

これはこれでいいのかもしれないのですが、なんだか物足りないですね。
ここでGoogleFontsを使って文字を豪華にしていきます。

まず、GoogleFontのページに飛びます。
https://fonts.google.com/

ここから、自分の好きなフォントを探します。種類が沢山ありますね。
今回はこのフォントを選びました。これをコードに組み込んでいきます。

適応させたいフォントが見つかったら右上のGet fontボタンをクリック。続けてGet embed code をクリックすると次のような画面になります。

インストールの方法としてとimportがあるのですが、今回はimportを選択します。
まず、

@import url('https://fonts.googleapis.com/css2?family=Jomolhari&display=swap');

の部分をコピーして、TSファイル（ページを作成しているファイル）と同じフォルダにstyle.cssを作成し、そこに貼り付けます。

style.css

    @import url('https://fonts.googleapis.com/css2?family=Jomolhari&display=swap');

続けて、フォントを使用するファイルに、CSS classの部分を以下のように貼り付けます。

この際、CSSファイルをインポートするのを忘れずに！！
CSSを記載する部分に

font-family: "Jomolhari",
  font-weight: 400,
  font-style: normal,

を書きます。
GoogleFontsには　font-family: "Jomolhari", serif;　と記載されていましたが、私の場合は必要なかったです。

無事適応されました。

まだまだ初心者ですので、表記が正しくない点などありましたら気軽に教えてください。精進します。