はじめに

WordPressに関する Tips情報です。
Googleの日本語Webフォントである「Noto Sans Japanese」をWordPressで使う方法について記事にしたいと思います。

Webフォントとは？

通常では、利用したいフォントデータをインストールし、CSSでfont-familyを指定して利用する必要がありました。
Webフォントを利用することで、フォントデータをインストールせず、ブラウザ上で任意のフォントを表示させることが可能です。

世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。
2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 
コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、
Googleではそれを”豆腐”と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った。

引用元： (https://ja.wikipedia.org/wiki/Noto)

Webフォントのメリット

• ユーザー環境に依存せずにフォントが表示できる
• 普段利用してるのフォント以外でも気軽に切り替えができる
• デザイン性の良い、フォントのパターンが多数ある

Webフォントのデメリット

• 有料の場合もある
• 外部サーバのフォントファイルを取得する通信が発生する為、読み込みに時間がかかる場合がある

Noto Sans Japanese　とは

Google Noto Sans Japanese　とは Google 社と Adobe 社の共同開発によって作られた日本語Webフォントです。

Google Noto Fonts -Beautiful and free fonts for all languages-

Noto Sans Japanese の設定方法

style.cssに@importで読み込む

WordPressの場合、 style.css に @import 形式で、Noto Sans Japanese のCSSファイルを読み込む設定をします。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

フォントファミリーの指定をする

次に、Noto Sans Japaneseを適用させたい箇所(font-family) に Noto Sans Japanese を追記します。

設定前

body {
	font-family: 'Open Sans', Helvetica Neue, Sans-serif;
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: #333;
	text-align: left;
	overflow-x: hidden !important;
	margin: auto !important;
}

設定後

body {
	font-family: 'Noto Sans Japanese','Open Sans', Helvetica Neue, Sans-serif;
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: #333;
	text-align: left;
	overflow-x: hidden !important;
	margin: auto !important;
}

まとめ

Webフォントは閲覧側の端末環境、回線速度などによって表示速度が遅くなってしまうなどの問題もありますが、「Noto Sans Japanese」のフォントファイルをインストールして利用すれば、パフォーマンスは比較的に向上する事が可能です。

[amazonjs asin=”4774173800″ locale=”JP” title=”WordPress　仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)”]
[amazonjs asin=”4883379248″ locale=”JP” title=”WordPressレッスンブック HTML5&CSS準拠”]