Googleフォント(WEBフォント)の使用方法【HTML・CSS】

最終更新日:

公開日:2024-07-12

記事内に広告が含まれています。
Googleフォント(WEBフォント)の使用方法【HTML・CSS】

ここ数年、どのブラウザやOSでも同じフォントで表示できるWebフォントの利用が主流になっています。
使い方は各社提供しているWebフォントや、自身でサーバーにフォントデータを入れて読み込むなどで多少の違いはありますが、今回は各社で提供しているWebフォントの利用方法についてです。

当ブログではGooleフォントで「Zen Kaku Gothic New」というフォントを利用していますので、これを例として紹介いたします。

Googleフォントの使い方

Google Fonts(https://fonts.google.com/)にアクセスします。
下の画像のように上部にある検索窓から使用したいフォントを検索し、利用したいフォント部分を選択します。

選択後、画面右上に「Get Font」という青いボタンがありますのでクリックします。
次の画面(下画像参照)では、Webフォントとして利用するか、フォントデータをダウンロードして利用するか選択します。今回はWebフォントとして利用しますので、上にある「Get embed code」を選択してください。

最後に、linkタグで読み込むか、@importタグで利用するか選択します。

どちらを選択した場合でも、指定のコードをhead内のcssファイルを読み込む前にコピーして貼り付けてください。
cssファイルの前に貼り付けないとフォントが適応されません
@importタグの場合はstyleタグを除いた@importのコードを、cssファイルに記述しても読み込みは可能です。

それぞれ貼り付けた後に、cssファイル内にフォント用クラスを作成したり、直接必要な個所に「font-family: “Zen Kaku Gothic New”, sans-serif;」と指定しても利用可能となります。

さいごに

いかがでしたでしょうか。
簡単に利用できるかと思いますが、複数のフォントを読み込むとサイト自体が重くなってしまいますので注意が必要です。
ですが、どの媒体でも同じフォントで表示されデザインの幅も広がりますので適切に使用していきたいですね。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼
PAGE TOP