「源ノ角ゴシック」WEBフォントに変換&サーバーアップ

by ·

Adobe&Googleによって開発されたフリーフォント「源ノ角（げんのかく）ゴシック」がリリースされた。

日本語フォントは漢字を含めると第一水準ですら2965文字もあり、たとえエネルギーの有り余ったフォントおたくデザイナーでもおいそれとは簡単にフリーのフォントをリリースできない。

以前は漢字も含めたフリーフォントは皆無であったが、最近ではIPAフォントをはじめその数は徐々に充実してきたことも事実だ。
しかしライセンスの煩雑さもあってこれと言った決定打にはお目にかかれなかった。

個人的にはライセンスの縛りを受けないデザイン性の高いフリーのフォントリリースは、その国の文化の自由な発展を左右するとさえ考えている。
オープンソース・アプリケーションへの同梱や参照、電子書籍データへの埋め込み、派生タイポグラフィ（フォント）の可能性、縛りのないタイポグラフィ。これら以外にも様々な可能性を秘めている。
もちろん1書体だけでそれらすべてが解決される訳ではないが、今回の「源ノ角ゴシック」のリリースは日本語タイポグラフィの歴史に新たなページを加えるものだ。

フォントに関する個人的感想としては、漢字部分は小塚ゴシックをベースとしているためか、それほど悪くないデザインであるが、縦書きをも意識しているためか少し古臭いイメージが漂う。メイリオほど現代的ではない感じだ。

 

 

まあ、可能性の話はさておき、早速「源ノ角ゴシック」をWEBフォント化してサーバーにアップしてみた。
2014年7月29日現在このサイトの標準文字の設定は「源ノ角ゴシック」SourceHanSansJP-Lightである。

 

WEBフォントへ変換

  • 武蔵システムさんのWOFFコンバータを使用して、OTFフォントをWOFFフォントに変換します。

サーバーへアップ

  • CSSフォルダの下位にfontフォルダを作成して、WOFFフォントをアップロードします。

CSS記述

  • 以下はCSS部分。bodyタグに対してSourceHanSansJP-Lightを適用している。
@charset "utf-8"; @font-face {  font-family: "myFontExtraLight";  src: url("font/SourceHanSansJP-ExtraLight.woff") format('woff');} @font-face {  font-family: "myFontLight";  src: url("font/SourceHanSansJP-Light.woff") format('woff');} @font-face {  font-family: "myFontNormal";  src: url("font/SourceHanSansJP-Normal.woff") format('woff'); } @font-face {  font-family: "myFontRegular";  src: url("font/SourceHanSansJP-Regular.woff") format('woff');} @font-face {  font-family: "myFontMedium";  src: url("font/SourceHanSansJP-Medium.woff") format('woff'); } @font-face {  font-family: "myFontBold";  src: url("font/SourceHanSansJP-Bold.woff") format('woff');} @font-face {  font-family: "myFontHeavy";  src: url("font/SourceHanSansJP-Heavy.woff") format('woff');}  .myFontExtraLight {  font-family: "myFontExtraLight";} .myFontLight {  font-family: "myFontLight";} .myFontNormal {  font-family: "myFontNormal";} .myFontRegular {  font-family: "myFontRegular";} .myFontMedium {  font-family: "myFontMedium";} .myFontBold {  font-family: "myFontBold";} .myFontHeavy {  font-family: "myFontHeavy";}  body { 	font: 13.5pt/1.5 "myFontLight"; 	line-height:160%; }

 

 

おすすめ