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

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

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

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

源ノ角ゴシック(Source Han Sans)の入手

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

Source Han Sans – Browse Files at SourceForge.net

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

SourceForge.netから入手

Webフォントへ変換

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

WOFFコンバータ

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

WOFFコンバータ

WOFFフォントをFTPでアップ

変換した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)は、すばらしいフォントです。

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

Apache Licence 2.0 にて、Source Han Sans Japanese / 源ノ角ゴシック フォント を利用しています。

参考エントリー

著者プロフィール

ものくろ(大東 信仁)
ものくろ(大東 信仁)
ブロガー・Web&Blogコーチ。親指シフト orzレイアウト開発者。ブログは月間65万PVを記録(2016年1月)。200回を超えるワークショップ開催・のべ1,000名のブログサポートに携わる。WordPressが得意。

詳しいプロフィールはこちら

もっと
ブログで情報発信
について読む