google fontsの使い方【コピペするだけ】

ABOUTこの記事をかいた人

フロントエンドエンジニア。

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

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

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

まずはgoogle fontsのサイトに行きましょう。

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

ページ遷移後、下にスクロールしてStylesセクションまで移動します。ここで目的のフォントスタイルのものを選ぶことになります。

ここで右上の歯車の右にあるアイコンをクリックし、サイドバーを表示させます。その後、目的のフォントのSelect this styleをクリックするとコピペするコード表示されます(少しスクロールするとcssのプロパティが表示されます)。

そして、それを以下のようにコピペします。cssのプロパティは、ページ全体に適用する場合はbodyタグに、一部の場合は該当のセレクタに記述します。

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

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

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

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

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

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

google fontsの読み込みを高速化する

2021年9月24日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください