フリーランスの道具箱

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 / 源ノ角ゴシック フォント を利用しています。

参考エントリー

広告

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


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。ブログは年間 1450記事を更新した経験も(2013年)。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます
follow us in feedly