Close

Web技術Tips

Homepage Tips Homepage Tips

ホームWeb技術Tips無料で使える明朝体の日本語WEBフォント

SHARE

SHARE

フォント 2015.09.14(公開)

無料で使える明朝体の日本語WEBフォント

これまではホームページで明朝体を使いたいときは、従来のようにWindows用、Mac用と別のフォントを指定して、別のフォントとして表示させてきた気がします。(例えばWindowsではHGS明朝E、Macではヒラギノ明朝 Pro W6など)
WEBフォントを使うとこういった異なるフォントを表示させるということもないのですが、筆者が知っている実践で使えそうな日本語WEBフォントといえばGoogleが提供しているNoto Sansフォントくらいで明朝体のWEBフォントは知りませんでした。

ということで明朝体の日本語WEBフォントについて調べてみます。

WEBフォントを探してみる

以下はいくつかの明朝体フォントをまとめて提供しているサイトです。

TypeSquare

webfont-img01

明朝体だけでも19種類から選ぶことができます。

無料で登録ができ、月間1万PVドメイン1つフォント1つという制限はありますが、通常のホームページを運用するのであれば問題無いと思われます。

数行のJavaScriptと一行のCSSを記述するだけでサブセット化まで対応したWEBフォントが使用できます。

また、このサイトでは『TypeSquare Web Font Tryout』という便利なサービスがあります。

ホームページのURLを入力すると、WEBフォントを使用したシュミレーションができ、最適なフォントを探しやすくなります。

webfont-img02

※ TypeSquare Web Font TryoutでDOEトップページのフォントを変更中。

サンプルテキスト (TypeSquare様のサンプルテキストを使わせていただきました。)

フォント名 サンプル
リュウミン webfont-ryumin
黎ミン webfont-reimin
黎ミンY10 webfont-reimin10
黎ミンY20 webfont-reimin20
黎ミンY30 webfont-reimin30
黎ミンY40 webfont-reimin40
太ミンA101 webfont-futomin
見出ミンMA1 webfont-midashimin1
見出ミンMA31 webfont-midashimin31
秀英明朝 webfont-shueimin30
秀英初号明朝 webfont-shueishomin
秀英初号明朝 撰 webfont-shueishosenmin
秀英横太明朝 webfont-shueiyokomin
凸版文久明朝 webfont-totsubanmin
光朝 webfont-kouchomin
A1明朝 webfont-a1min
ヒラギノ明朝 webfont-hiraginomin
本明朝 webfont-honmin
ナウ(明朝) webfont-naumin

Adobe Typekit

webfont-img04

Adobe社が提供するWEBフォントツールです。

日本語フォントは14種類、明朝体フォントは6種類(実質4種類)の中から選べます。

無料のプランでは月間25,000PVドメイン1つフォント2つまで使用可能です。

もちろんサブセット化には対応済み。

使用方法ですが、『キット』という機能でまずWEBサイトを登録します。

次に使いたいフォントをクリックし、『フォントを使用』を押してフォントの登録をします。

WEBフォントを実装するにはjsとcssの記述が必要ですが、別ウィンドウで開く管理画面からコピペして下さい。

webfont-img05

サンプルテキスト (Adobe Typekit様のサンプルテキストを使わせていただきました。)

フォント名 サンプル
りょう Display PlusN  webfont-ryo01
りょう Text PlusN  webfont-ryo02
平成明朝 Std  webfont-heimin01
平成明朝 StdN  webfont-heimin02
小塚明朝 Pro  webfont-kozuka01
小塚明朝 Pr6N  webfont-kozuka02

FONT FREE

webfont-img03

こちらはWEBフォントを提供しているサービスではなく、フリーフォントを集めただけのサイトです。

カテゴリごとにフォントをまとめてあるので探しやすいです。

明朝体の登録数は16種類ほど。

フォントの配布サイトを提供しているだけですので、WEBフォントとして利用するにはライセンスの確認をしましょう。

また、後述するWEBフォントとして使用する手順が必要になります。

@font-faceについて

※以下は自前でWEBフォントを使う方法なので、読まなくても結構です。

@font-faceとは簡単に言うと、ユーザーにWEBフォントファイルを読み込ませるcssの構文です。

基本的な使用例を見てみましょう。

@font-face {
	font-family: FontName;
	src: local('fontname') url('font/filename.ttf') format('truetype');
}

p {
	font-family: FontName;
}

まず、@font-faceでのfont-familyで名前を定義します。名前は何でも構いません。

次にsrcで読み込むファイルの指定をします。

ここでは3つの値を指定していますが、url()の値以外は必須ではありません。

local()にはフォントの正式名称を入力します。

ユーザーのパソコンにフォントがインストールされているかをチェックし、インストール済ならそのフォントを使います。この場合フォントのダウンロードは行われずに済みます。

しかし、IE9以下ではlocal()自体が使えなかったり、他にも問題点があることからlocal()は使用しないほうが一般的には安全だそうです。

url()ではフォントファイルのパスを指定します。

format()ではフォントファイルの種類を指定します。省略可。

ちなみに@font-faceでWEBフォントを定義するだけではテキストにフォントは適用されません。

@font-faceで定義したfont-familyをスタイルで適用させる必要があります。

@font-faceの詳しい解説サイトはこちら:@font-face - CSS | MDN

互換性の高い@font-faceの記法

『CSS3開発者ガイド』という本で推奨されていた@font-faceの記法を紹介します。

コードはこちらになります。

@font-face {
	font-family: 'Gentium Basic';
	src: url('GenBkBasR.eot');
	src: url('GenBasR.eot?#iefix') format('embedded-opentype'), /*IE9での互換性の問題のための記述*/
	url('GenBkBasR.woff') format('woff'),
	url('GenBkBasR.ttf') format('truetype');
}

url()がいくつもありややこしいですが、本命はWOFF形式のフォントを読み込ませることです。

他の記述はWOFF形式に対応していない場合に、代わりに読み込ませるための記述です。

フォント形式 拡張子 特徴
EOT .eot 古いIE(IE6~IE8)にのみ対応しているフォント。

IE対策で読み込ませる。

TrueType .ttf 長い歴史を持ち、高度な機能は持たない代わりに動作環境が多い。
OpenType .otf TrueTypeの上位互換。
WOFF .woff WEBフォント向けに開発された形式なので、データが軽い。

また不正利用を防げるなどのメリットがある。

最新のブラウザではこの形式に対応しているようです。

@font-face Generatorでフォントファイルを生成

先程述べたような互換性の高い@font-faceの記述を使うためには、複数のフォントファイルが必要となります。

Font Squirrelによる@font-face Generatorを使用すると、必要なフォントファイルを自動生成してくれます。

また、ついでに@font-faceが書かれたcssも生成されます。

webfont-img06

英語のサイトとなっていますが使い方は簡単です。

  1. 元となるTrueTypeフォント、もしくはOpenTypeフォントをアップロード
  2. アップロードするフォントがWEBサイトへの埋め込みを許可していればチェック
  3. ファイル作成

これでEOT形式とWOFF形式のフォントファイルが生成されます。

フォントのライセンス(著作権)を確認

FONT FREEで紹介したような無料で配布しているフォントの中にも、フォントの改造や商用での利用を禁止を製作者が定めている場合があるので、使用する前にライセンスの確認をしておきます。

  • フォントデータをサーバーにアップしての再配布を許諾しているか。
  • 商用での使用を許諾しているか。
  • フォントデータの形式変換を許諾しているか。
  • フォントデータのサブセット化を許諾しているか。

特に個人サイトで手に入るようなフォントに関してはよく確認しておきましょう。

サブセット化について

WEBフォントを使用する際、英語フォントであればフォントファイルが軽いためそのまま使えるのですが、文字数の膨大な日本語フォントは、そのまま使うには重すぎます。

これを解決するために、WEBページを読み込む際にそのページで指定した文字列だけ取り出して、フォントサイズを小さくしたフォントファイルを毎回作成するサブセットという仕組みを利用します。

上述したTypeSquareやAdobe TypekitではJavaScriptを用いて動的にサブセット化させているようですが、どういう仕組みで動いているかは筆者には理解できませんでした。

ですので予め指定した文字だけを収録したフォントファイルを作成するツール(使い方簡単)を紹介します。

本当は動的なサブセット化が簡単に実装できればいいんですけど、現状ではある程度プログラミング知識がないと手が出せないようです。

サブセットフォントメーカー

使い方も載っていますので参照して下さい。

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Xでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。