今回は、Google fontsの書体の読み込み方と使い方を画像を使って、
わかりやすくご紹介させていただきます。
目次
Google fontsの書体の読み込み方と使い方
1.Google fontsの公式ページで使用したい書体を探す
まずは、以下のリンクより公式ページへ飛びましょう！
公式ページに飛ぶと、以下の画面になると思います。
まずは、使いたい書式を検索しましょう！
以下の画像の赤い河川で引いているところから検索してください。
※日本語では、検索できないため英語で検索しましょう
『san』と検索すると、書体の名前にsanがついている書体が表示されます。
また、以下の画像の赤線の検索バーに『hello』と入力すると、
全ての書体のサンプルがhelloに変わります。
これには、僕も驚きましたwww
そんなことはさておき、
画像の青線のカーソルでは、サンプルの文字の大きさを調整できます。
お気に入りの書体が見つかったら、サンプルをクリックしましょう！
2.書体の読み込み準備
それでは、書体を読み込んでいきます！
書体をクリックしたら、以下の画像赤線で囲んだ『select this style』をクリックしてください。
すると、以下の画像のようになるので、赤線で囲んでいる『Embed』をクリックしてください。
以下の画像のコンテンツが出たら、とりあえず書体を読み込む準備は完了です！
それでは、書体をサイトに読み込んでいきましょう！
3.Google fontsの2通りの読み込み方
<head>内に書体を読み込む方法
以下の画像の<link>をクリックし、上のコードを<head>内に、下のコードを適用させたいテキストのcssに貼ってください。
<head>内に貼った例
cssに貼った例
CSSだけに読み込む方法
続いては、CSSのみに読み込む方法です。
以下の画像の赤線の『@import』をクリックし、
赤矢印で指している上のコードをCSS内の先頭に貼り、
下のコードを適用させたいテキストのcssに貼りましょう。
css内のコード例
4.読み込み完了！
それでは、読み込みが出来たと思いますので、確認してみましょう！
読み込み前
読み込み後
これで、書体の読み込みは無事完了です！
お疲れ様でした！
