リンクをコピーしました

Webフォントを実装するなら、無料のGoogleフォントを活用しよう

Suite WEB 編集部

Suite WEB 編集部

  • Facebook
  • Twitter
  • LINE
  • はてなブックマーク
  • Pinterest
  • LinkedIn
  • note
  • クリップボードにコピー

Webフォントとは?

Webサイトにおいて、サイトデザインの質を向上させてくれるのが「Webフォント」です。

通常だと、Webページを閲覧する端末にインストールされているフォントしかページ上に表示させることができません。しかし、Webフォントを使用すると、フォントをサーバーから読み込むため、どの端末でも共通のフォントを表示させることができます。

また、画像テキストに比べ、Webフォントを利用することはデザイン性を高めるだけでなく、SEOにも効果的です。特に、タイトルのテキストを画像テキストで表現している場合などは、積極的にWebフォントを活用し、脱画像テキストを実現すると、より効果的かもしれません。

そんな時にとても便利なのが「Google Fonts」です。Google Fontsとは、Googleが提供するWebフォントのサービスです。基本的に無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。

Googleフォントを設定する

Google Fontsページにアクセス

まずはGoogle Fontsにアクセスしましょう。一覧で様々なフォントが表示され、この中から使用したいフォントを選択していくことになります。

Google Fonts

使用したいフォントを選ぶ

使用したいフォントを選択すると、選択したフォントの太さなどのスタイルが表示されます。この中から実際にサイトに反映させたいフォントの「Select this style」をクリックすると、画面右側に「Selected family」として選択項目に追加されます。

使用したいフォントを選ぶ

「Select this style」をクリック

画面右側「Selected family」に追加された

画面右側「Selected family」に追加された

head内にコードを追加する

画面右側に選択したフォントが表示されます。<link>部分に書かれたコードを、HTMLファイルのhead内に記述しましょう。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet">

CSSでフォントを指定する

head内への記述が完了したら、「CSS rules to specify families」に書かれているコードをCSSファイルの、フォントを適用させたい要素に対して記述します。下記の例ではh2タグにのみ「Source Sans Pro」に設定したいので、CSSでも指定するセレクターを限定して記述をします。

h2 {
  font-family: 'Source Sans Pro', sans-serif;
}

記述を完了すると、指定した要素(今回だとh2タグ)にWebフォントが反映されているはずです。Googleフォントの基本的な使い方は以上となります。とても簡単ですね。

Googleフォントのライセンスについて

Google Fontsは、オープンソースで提供されているので、基本的に無料で利用できます。オープンソースは「商用・非商用を問わず、誰でも利用することができ、自由に修正、頒布ができる」ので、基本的には無料で利用できます。

必要な文字だけ使用してみよう

日本語を含むフォントを使用しようとすると、データ量が2〜3MBあったりしてかなり重たかったりします。Google Fontsを含むWebフォントは、サーバーからの読み込みテキストを表示しているため、利用するフォントの数やフォントのウェイトの種類が多ければ多いほど、読み込むデータ量が大きくなりページの表示に時間がかかります。そこで、できるだけ無駄な読み込みを省くために、実際に使う文字だけ抜き出すサブセット化をしてみましょう。

Googleフォントであれば、サブセット化する場合にも、難しい設定や余計なツールは不要です。Googleフォントを読み込ませる時に、HTMLの head 内に記述するURLの&text=に続くように必要な文字を入力するだけで設定が可能となります。

下記の例では、日本語を含む”Noto Sans JP”フォントで、「必要な文字だけ使用してみよう」の文字だけを読み込ませたサンプルです。

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&text=必要な文字だけ使用してみよう" rel="stylesheet">
</head>

Google Fontsについて利用方法の紹介をしました。Google Fontsは様々な言語に対応しており、Webフォントの種類も豊富なため、サイトのデザイン性だけでなくSEOを保ったまま提供することができます。選択するWebフォントの1つでサイト全体の雰囲気も変わるので、ぜひGoogle Fontsを活用してみてください。

  • Facebook
  • Twitter
  • LINE
  • はてなブックマーク
  • Pinterest
  • LinkedIn
  • note
  • クリップボードにコピー