GoogleとAdobeが産んだオープンソースフォント源ノ角ゴシック（Source Han Sans）をWebフォントにしてWordPressで使ってみた

2014年8月2日

GoogleとAdobeが共同で開発し、オープンソース（Apache License, Version 2.0 ）で提供されている話題のフォント「源ノ角ゴシック（Source Han Sans）」をWebフォントとして、ものくろぼっくすの表示に設定しました。

スマートフォンでの読みやすさ・WindowsとMacなどOSの違いを意識しない綺麗なフォントを実現できました。

WordPressで使っているテーマ”el plano”でのフォントセットアップ方法をまとめています。

フォントはSourceForge.netから入手します。詳しくはこちら（Source Han Sans の入手方法について – M59のブログ）をご覧ください。

日本語だけでokなので「SourceHanSansJP-1.000.zip」を入手（2014/08/02 現在）します。

SourceForge.netから入手

武蔵システムさんのWOFFコンバータ（アプリ）を利用して、ダウンロードしたフォントをWOFFフォントに変換します。

ありがたいことにWindows・MacOSXの両方に対応されています。感謝。

WOFFコンバータ

変換したWOFFフォントをFTPにて、サーバーへアップロードします。今回は「SourceHanSansJP-Light」を表示フォントに設定しました。強調とかのemタグとかは実は使っていないので、とりあえず、bodyのfont設定だけ行いました。

WordPressテーマのelplanoの場合、「wp-content」-「themes」−「dp-elplano」−「css」の中に、「webfont」フォルダを作り『SourceHanSansJP-Light.woff』をアップロードします。

elplanoテーマのスタイルシートは管理画面にある「オリジナルスタイルシート」に追記する形になります。

[code]
/* Webfontを埋め込み */
@charset "utf-8";

@font-face { font-family: "myFontLight"; src: url("webfont/SourceHanSansJP-Light.woff") format(‘woff’);}

.myFontLight { font-family: "myFontLight";}

body {
font: 13.5pt/1.5 "myFontLight";
line-height:144%;
}
[/code]

オリジナルスタイルシートにWebfontの設定を追記

これで「源ノ角ゴシック」を使ったフォント表示に切り替わりました。ブログの表示速度が遅くなるデメリットもありますが、フォントがOSに関係なく統一されて読みやすいので、大満足です。

GoogleとAdobeが産んだオープンソースフォント源ノ角ゴシック（Source Han Sans）は、すばらしいフォントです。

追記：ライセンスに従い、フッターに以下の表記を配置しました。

この記事を書いた人