日本語フリーフォントのWebフォント化!源真ゴシックを@font-faceで読み込んでみよう

2016/11/20

35_1
最近はWebフォントを利用しているサイトを多く見かけます。ユーザーのPC環境に左右されずに同じフォントを表示できて非常に便利で「Google Fonts + 日本語早期アクセス」が公開され日本語フォントの種類が増えたこともあり、さらに使える場面が増えそうです。とはいえ、まだまだ日本語Webフォントの種類は豊富ではないと思います。ということで、気に入った日本語フォントがWebフォント化されていないときに自分でWebフォント化するまでを紹介していきたいと思います!

Webフォント化するフォント選び

まずはWebフォント化するフォントを選びます。今回はWebフォント化して利用したことのある「源真ゴシック」を例にして手順を進めていきたいと思います!
 

フォント選びで注意すること

Webフォント化したいフォントが決まったらライセンスの確認を必ずしましょう。
フリーフォントだとしてもライセンスによって利用方法が違ったり、商用利用ができなったりする場合があるので目的に合った使い方ができるのか確認してください!
 

ちなみに、今回利用する「源真ゴシック」は下記のライセンスページにWebフォント化や商用利用についての許可が記載されています。
源真ゴシック ライセンスページ

フォントファイルのサブセット化

日本語フォントは英語フォントに比べて、ひらがな・カタカナ・漢字の分を含んでいるのでファイル容量が大きくサイトの表示が遅くなってしまいがちです。そこで、使われる頻度の高いであろう文字だけを抜粋してファイル容量を軽くしてあげるのがサブセット化になります。
 

無料サブセット化アプリ

武蔵システムの提供している「サブセットフォントメーカー」はWindowsにもMacにも対応している無料アプリです。まずは、こちらをインストールしましょう。
 
ダウンロードページはコチラ
 

続いて同じく武蔵システムが提供している「WOFFコンバータ」もインストールしておきます。Webフォントのファイル形式は.woffなので.ttfなどのフォントファイルを変換する必要があります。WOFFコンバータをインストールしておくとサブセット化の流れで変換もおこなえるので便利です!
 
ダウンロードページはコチラ
 

サブセット化する

「サブセットフォントメーカー」を起動してサブセット化したいフォントファイルを選択します。
 

35_2
「作成元フォントファイル」を選択したら次は「作成後フォントファイル」を指定します。今回はファイル名は同じにして保存するディレクトリを変更してあります。
 

35_3
次にWebフォントとして使用する文字を入力します。一般的に使用されそうな文字は「第一水準漢字+ひらがな+記号」を入れておけば大丈夫だと思います。こちらのPDFに一覧があるので参考にすると便利です!
 

35_4
使用文字の入力が終わったら書体名を変更して作成をします。作成する前にWOFFコンバーターの起動にチェックが入っているか確認しておきましょう。作成後に自動でWOFFコンバーターを起動してファイル形式の変換へ作業を移せます。

woffファイルの作成

サブセット化が無事に終わるとWOFFコンバーターが起動されます。「変換前ファイル」は自動で入るので、変換前とファイル名を変えたい場合は「変換後ファイル」を入力します。必要なければ空欄のままで大丈夫です。
 

35_5
その他で必要なことがあればチェックを入れて変換を開始します。EOTファイルはIE6〜IE8でも表示したいときに必要なファイルになります。
 

35_6
変換が正常に終了すると.woffと.woff2のファイルが作成されます。この2つは圧縮方法が違うようで.woff2の方がファイル容量が軽いですがIEには対応していないようです。
 
 

いくつかフォントウェイトが用意されている場合は、読み込み速度を軽くするためにも最低限必要なウェイトを選んでサブセット化とファイル変換をおこないましょう。

CSSの@font-faceでフォントを指定

フォントファイルの作成ができたらCSSで読み込みをしてWebサイトで表示できるようにします。フォントファイルの読み込みには@font-faceを利用します。
 

@font-faceの記述

@font-face {
  font-family: "GenshinGothicNormal"; //任意の名前を設定
  font-style: "normal"; //フォントスタイルの設定
  font-weight: 400; //フォントウェイトの設定
  src: url("/fonts/GenShinGothic-Medium.woff2") format("woff2"),
       url("/fonts/GenShinGothic-Medium.woff") format("woff"); //フォントファイルの指定
}

実際のコードは上記のように、CSSでfont-family名の指定・font-styleとfont-weightの設定・フォントファイルの指定を記述してあげます。複数のウェイトファイルが用意されている場合は使用したいフォントファイルの分だけ設定を同じように記述しましょう。
 

webフォントの指定

	body{
		font-family: "GenshinGothicNormal";
	}

	.webfont{
		font-family: "GenshinGothicNormal";
	}

webフォントで表示をさせたい要素にfont-familyで指定をするだけで適用されます。class名を付与して利用することもできます。

以上がフリーの日本語フォントをwebフォント化してCSSで読み込むまでの手順でした。ユーザーのPC環境に左右されずにフォントを表示できることでサイトの統一感も出ると思うので、読み込み速度が遅くなってしまわないことに注意をしながら積極的に取り入れてみてはいかがでしょうか!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend