ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

Webフォントでウェブサイトをもっと魅力的に

近年、Google Fonts（グーグルフォント）＜無料＞で日本語フォントが増えて以来、Webフォントは、サイト制作に欠かせない要素となりました。
https://fonts.google.com/
そこで、今回はGoogle Fontsの使い方と、さらにウェブサイトでフォントを自由に使いたい方向けのサービスを紹介します。

  1. Webフォントとは？
  2. Google Fontsでフォントを選ぶ
  3. Google Fonts使用法と注意点
  4. 更なる軽量化を目指すなら
  5. まだあまり、普及していませんが

1.Webフォントとは

まず、最初にWebフォントについてご説明します。

現在、Webサイトで表示できるテキストは大きく分けて2つあります。
デバイスフォントとWebフォントです。

デバイスフォントはそれぞれのユーザーの閲覧環境（デバイスにインストールされているフォント）に依存するため、環境によってフォント表示のされ方が変わります。

一方、Webフォントは、インターネット上からフォントのデータを引き出してきてホームページ上に表示させます。
利点としては、ユーザーがどの環境で閲覧しても、同じ見た目を提供できます。今まで画像で対応していた部分もテキスト化されSEO対策にもなります。また、修正対応も非常に簡単になります。
デメリットは、データが重くなり、読み込みに時間がかかるという点です。

Webフォントを使用するには有料と無料のサービスがあります。
今回ご紹介するのは無料のGoogle Fontsです。

2.Google Fontsを使ってみよう

まず、Google Fontsへアクセスします。
図の赤い部分下（Languageタブから）からフォントの種類が選べます。
Japaneseを選ぶと日本語フォントが出てきます。選べるフォントは2022年8月現在で51書体 （太さ違いも含めると1442）です。

色々あって迷いますが、仕事で使うとなると以下の2つが重宝します。

  • Noto Sans Japanese（ゴシック体）
  • Noto Serif Japanese（明朝体）

Noto SansとNoto Serifは、GoogleとAdobeが複数のフォントメーカー・デザイナーと共同開発したフォントです。
このフォントの最大の利点は、旧字体等を含む全ての文字（JIS漢字コードで定義された6,390漢字を含む）が使用可能な点です。少し前まではNoto Sans CJK JPという名称で、3言語（日本語／中国語／韓国語）の表示ができたのですが、各言語に分かれ、軽量化したようです。
また、文字が美しいというのも大切なポイントです。

フォントの選択肢が沢山あるなかで、Noto Sansをおすすめする理由はユーザーフレンドリーを第一に考え、読みやすさを重視しなければならないからです。
見出しやアイキャッチは、作り出したい世界観によってそれぞれ適したフォントがあると思いますが、本文テキストでは、Noto系をおすすめします。

3.Google Fonts使用時の注意点

大切なことは、Webフォントを沢山使いすぎないことです。
例えば、さきほどお勧めしたNoto Sans Japaneseですが、ウェイト違いが6つあります。こちらは1ウェイトあたり1.6MBです。RegularとBoldの2つのウェイトを使うと、3.2MBです。たくさん読み込めば、読み込んだだけサイトの表示も遅くなります。
Google FontsはCDN※のコードをサイト上で生成できますが、その時に、使用するウェイトを選択することを忘れないでください。
※CDN：インターネット経由でファイルが配信される仕組み (Content Delivery Networkの略)。

Webページは、フォントを読み終わるまで文字が表示されないので、Webフォントが重すぎると、文字が表示されないという現象が起こります。
それを防ぐために「font-display: swap;」というcssプロパティがあります。これは、フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されるというものです。
Google FontsのCDNのコードにはこの「swap」が自動で入っているので、読み込み時の、文字の不在が起こりません。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap" rel="stylesheet">


フォントをWebページに読み込むには、<link>と@importの2つの方法があります。
今回は<link>を使う場合で説明します。
上記図の「Use on the web」の<link>を選択します。
コードの準備ができたら、それをHTMLにコピペするだけです。
（@importを使う場合はcssに記述してください）
<link>はHTMLの<head></head>間に記述してください。

<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@300;500&display=swap" rel="stylesheet">


フォントを当てはめたい部分にCSSのfont-familyで指定します。以下のように記述すると、サイト全体にWebフォントを使用できます。

body {
  font-family: 'Noto Sans JP', sans-serif;
}


クラス指定して使うこともできます。

.font01{
    font-family: 'Noto Sans JP', sans-serif;
}


4.更なる軽量化をめざすなら

上記では、Google Fontsのサービスが生成するコードからフォントを読み込む方法を紹介しました。
Google Fontsを使用する方法として、もう1つ別のやり方があります。
それは、自分でサーバーにフォントファイルをアップロードして、そこからフォントを読み込む方法（セルフホスティング）です。
この方法が利用できるのは、前提として、「再配布」と「改変」が許可されているフォントに限ります。Google FontsのライセンスはほとんどがSIL Open Font Licensek※で、商用プロジェクトでも無料で利用できます。
※SILオープンフォントライセンスの略。2点の条件をクリアすれば基本的には自由に使える。
参照：https://tanukifont.com/sil/

ではセルフホスティングの設定方法です。

（1）https://fonts.google.com/でフォントをダウンロード

　希望のフォントを選んだら右上のボタンから一括ダウンロードできます。今回はNoto Sans Japaneseを選択します。（全ウェイトがダウンロードされます）

（2）フォントの軽量化

サブセットフォントメーカーをダウンロードします。
https://opentype.jp/subsetfontmk.htm
サブセットフォントメーカーで変換すると、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化し、ファイルサイズを削減し、必要な文字だけに絞り込まれます。（1）で全ウェイトをダウンロードしましたが、必要なウェイトだけ使用してください。

（3）拡張子を変換

拡張子otfではWEBフォントとして使えない為、WOFFコンバータで拡張子をWOFFに変換します。
https://opentype.jp/woffconv.htm

（4）サーバーに上げてWebサイトに設置

サーバー内に下記のように設置すると管理しやすいと思います。

/css/site.css
/css/font/NotoSansJP-Medium.woff2（.woff）
/css/font/NotoSansJP-Bold.woff2（.woff）

（woffは、より圧縮率の高い「WOFF 2.0」標準が勧告されています。両者に互換性はありません。モダンブラウザはどちらも対応しています。）

（5）@font-faceでフォントファイルを読み込む。

CSSに記述します。ウェイトの種類分の@font-faceを記述します。

@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
font-display: swap;
url('/ css /fonts/NotoSansJP-Medium.woff2 ') format('woff2')
} 
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
url('/ css /fonts/NotoSansJP-Bold.woff2') format('woff2')
}


参照元：https://pecopla.net/web-column/weight-saving-webfont

5.まだあまり、普及していませんが

ところで、バリアブルフォントという言葉を聞いたことがあるでしょうか？
バリアブルフォント（Variable Font）とは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。太さ、字幅などを自由に調整できるフォントのことです。
簡単に言うと1つのフォントに複数のウェイトが入っているイメージです。
Webフォントで複数のウェイトを使いたい場合はその分だけフォントを読みこまなければなりませんが、バリアブル版は1つのフォントを使って太さを数値で細かく指定できるので、文字の微調整がしやすくなります。しかも読み込むのは1フォントだけです。たとえ、1ファイルのデータが多少重くてもデザイン上は、大変メリットを感じます。

バリアブルフォント参考サイト：
https://dsinside.digitalstage.jp/entry/2021/05/18/180314
https://note.com/flopdesign/n/nde240b460382
https://v-fonts.com/

2021年には、Noto sansのバリアブルフォントがリリースされました。

下記gitHubからダウンロードします。
（Google Fontsのサイトからはダウンロードできません。）
https://github.com/googlefonts/noto-cjk/blob/main/Sans/Variable/OTF/Subset/NotoSansJP-VF.otf

NotoSansJP-VF.otfをダウンロードし4の（3）と同じように変換し、それ以下は同じ要領で設定をしていきます。
CSSの記述です。

@font-face { 
  font-family: "NotoSansJP";
  src: url(/css/fonts/NotoSansJP-VF.woff2") format("woff2-variations");
  font-weight: 100 900;
}
h1 {
  font-size: 3em;
  line-height: 1.4;
  font-family: "NotoSansJP", sans-serif;
  font-variation-settings: "wght" 800;
}
p {
  font-family: "NotoSansJP", sans-serif;
  font-weight: 450;
}

font-weightが細かい数値で設定できるのはすごくいいですね！ デザインも、より細かい表現か可能になります。

まとめ

今回はWebフォントをご紹介しました。
Webフォントはすでに使用している方も多いと思いますが、バリアブルフォントの登場でより軽量化、表現の幅を広げることができるようになりつつあります。比較的技術寄りな話題ととらえられがちなWebフォントですが、デザイナーにとっても、大変、興味深い分野です。
これからも注目していきたいです。

WEBデザイナー ／ Y.E

WEBデザイン制作に関するお問い合わせはこちら