【Webフォント】タイトルを無料で使える「Noto Sans CJK」に変更してみた!

Webフォントについては以下の記事にまとめています。
日本語「Webフォント」の紹介とメリット・デメリット

では実際に「Noto Sans CJK」をダウンロードするところからWeb上で表示するまで設定します。

ダウンロード

以下のページから無料でダウンロードすることが出来ます。
私のように間違えて362MBの「ALL FONTS」をダウンロードしないようにしましょう。

GoogleNotoFonts

下にスクロールしていくと「Noto Sans CJK JP」があるのでそれをダウンロードして下さい。

NotoSansCJKJP
「Noto Sans CJK」も93.8MBと結構サイズは大きいです。

展開するとWebフォントのフォーマット「.otf」形式のファイルが7個あります。

NotoSansCJKkaitou
今回は一番太字の「NotoSansCJKjp-Black.otf」を使用します。

「.otf」はSafari4.2以上とIEに対応していません。
IEに対応する為だけに「.eot」に変換する必要があります。
ですが、変換の前にサブセット化しておきましょう。

サブセット化

NotoSansはオープンソース(Apache 2.0ライセンス)で無償配布されています。
なので改変しても問題ありません。

サブセット化とは必要な文字だけ抽出したファイルを作ることです。
Webフォントが全ての文字を網羅してなくてもいいという場合はサブセット化しましょう。

以下のサイトよりサブセット化するツールをダウンロードします。Windows、Macどちらにも対応しています。

サブセットフォントメーカー|武蔵システム

作成後フォントファイルには保存先/保存名を入れます。
書体名も適当に変更してください。
フォントに格納する文字はタイトルで利用する「ま」「と」「め」「た」「る」にしました。
サブセットフォントメーカー

作成開始を押すと「ま」「と」「め」「た」「る」で構成された「NotoSansJPSub.otf」が出来上がります。

WebSubsetFont

17.3MB → 4kBにダイエット成功しました。

Webフォントのフォーマット変換

ダウンロードできる多くのフォントのフォーマットは「.otf」か「.ttf」のものが多いです。
他のフォントのフォーマットは「.woff」や「.eot」、「.svg」があります。
以下のブラウザとフォーマットの対応表を参考にして下さい。

WOFFOTF/TTFEOTSVG
Chrome×
Safari5.1以上4.2以上×
Opera11以上×
FireFox×
IE9以上×
ドロイド君4.4以上×3以上

表から分かるように、今後はWOFFとOTF/TTFの2形式を用意していおけば、ほとんどのブラウザに対応できます。
より詳細に知りたい場合は以下のリンクで確認できます。
Can I use ?

全てのフォーマットに変換可能な便利ツール

全てのフォーマットに変換できるツールがあったのですが、今回は使用できませんでした。
WEBFONT GENERATOR|FONT SQUIRREL

EOTに変換する

「.eot」に変換する場合は、このようなツールがありました。
私は実行していないので、ご自身で判断して利用してください。

ttf2eot

WOFに変換する

「.woff」に変換する場合は、これがオススメです。
WOFFコンバータ|武蔵システム

使い方は簡単で先ほどのサブセットメーカーとほとんど同じなので、説明は省略します。

サーバーにアップロードする

このサイトはWordPressのテーマを使用しているので以下の場所に入れます
「wp-content」>「themes」>「使用しているテーマフォルダ」にアップロードして下さい。

私はstyle.csscと同じ階層に入れました。

CSSに記述追加

Webフォントのフォントファミリーとパスを定義します。

@font-face {
font-family: NotoSansJPSub;
src: url(NotoSansJPSub.woff);
}

@font-face {
font-family: WebSubesetFont;
src: url(NotoSansJPSub.ttf) format("truetype");
}
div#header  {font-family: NotoSansJPSub}

これでNotoSansJPSubが使用できるようになりました。
今回はタイトル文字(サイトネーム)だけを変更したいので、以下のCSSを追加しました。

#container #header #header-in #h-l .sitename {
	font-size: 50px;
	font-family: NotoSansJPSub;
	margin-top: 20px;
	margin-bottom: 25px;
}
#container #header #header-in #h-l .sitename a {
	font-size: 50px;
	font-family: NotoSansJPSub;
}

以上でタイトルにNotoSansJPCJKが表示されるようになりました。

NotoSansフォント確認

さいごに

WordPressのテーマを使用しているサイトにNotoSansCJKをインストールしてみました。
ほんの少しCSSの知識が要るかもしれませんが、フォント、ツールともに無料で利用できるので「Webフォント」の導入を検討してみてはいかかでしょうか。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD