PR

Google Fontsの使い方【コピペするだけ】

HTML/CSSを学ぶ

こんにちは。コーディング案件においては、デザイナーさんからフォントの指定をされることがよくあります。場所によってフォントが異なったり、フォントファイルを準備する必要があったり、意外と大変です。

そこで今回は、Google Fontsを使ってサイトのフォントを簡単に設定する方法を紹介します。

使い方は数行コピペするだけ

まずはGoogle Fontsのサイトに行きましょう。

Screenshot

サイト上部の検索バーに目的のフォント名を入力して、該当のものをクリックします。

Screenshot
Amazon.co.jp: Webデザイン良質見本帳
Amazon.co.jp: Webデザイン良質見本帳

ページ遷移後、右上の青いボタン「Get Font」を押します。ここで目的のフォントスタイルのものを選ぶことになります。

Screenshot

ページ遷移後、必要なフォントが選ばれている(画面内に表示されていればOK)かを確認してください。確認できたら右の「Get embed code」を押します。

Screenshot

ページ遷移後、右側上段の「Embed code in the <head> of your html」の欄に埋め込みコードが表示されますのでこれをheadタグ内にコピペします。

Screenshot
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- ここからコピペ -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
    <!-- ここまでコピペ -->

    <style>
      body {
        font-family: "Noto Sans JP", sans-serif; //ページ全体に適用する場合
      }

      .class1 {
        font-family: "Noto Sans JP", sans-serif; //一部に適用する場合
      }
    </style>
    
  </head>

  <body>
    〜
  </body>
</html>

これだけでフォントが適用されます。

商用利用も可能なので、コーディング案件でも活用できる

Google Fontsは商用でも無料で利用することができます。案件でどんどん使っていけるので、使い方をしっかり覚えましょう。

実は読み込みを高速化する方法がある

こんな便利なGoogle Fontsですが、読み込み速度が遅いという問題があります。

それを解決する方法を紹介していますので、こちらをご覧ください。

この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
HTML/CSSを学ぶ
スポンサーリンク
シェアする
小林 秀樹をフォローする

コメント

タイトルとURLをコピーしました