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

参考エントリー


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

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

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

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告