タグ別アーカイブ: 日本語ウェブフォント

日本語ウェブフォントを作ろう!Notosans(源ノ角)で日本語webフォント

webfontmaking

ウェブフォントを作ろうと思っても、実際フォントを作るのはたいへん。
とはいえ実際に公式に無料でウェブフォントとして使えるフォントは
M+フォント
Source Han Sans(源ノ角ゴシック)(Noto Sans

IPA FONTは再配布あたるとの回答が出ているので
通常の方法では難しいかもしれません。
そして無条件で改変して、再配布しても大丈夫なのは
おそらく、M+と源ノ角という事になります。

というわけで源ノ角ゴシックを使ってウェブフォント
の作り方を紹介します。

今回はレギュラーに加えて90%、80%、70 %の細長い書体
も同時に作ってみました。普通じゃつまらないので。

フォントを触るときは、やっぱり1つはフォント作成ソフト
があると便利です。
・OTEditかTTEdit
・Fontographer
・Glyphs

ぐらいがメジャーどころでしょう。今回程度であれば
なくてもなんとかなりそうですが。

1.フォントのサブセット化

日本語フォント全部をアップすると数メガ、いや10メガを越えてしまう
場合が多いので、まるごとアップすると、表示に時間がかかり
ウェブサイトしては致命的です。
なので、「かな」やアルファベットやよく使う記号などのみにして
漢字は「メイリオ」や「ヒラギノ」などが自動的に表示される様にします。
これはサブセットフォントメーカーを使って文字を減らします。
ウェブサービスでも、できる所もあります。

今回は4種類のフォントを作りました。
横幅が100%~70%までの4段階を作っています。

webfont作成

サブセットフォントメーカーはすごく簡単です。
フォントを選んで、フォントにしたい文字をテキストで記述するだけ。
日本語ウェブフォント

 

2.ウェブフォントに変換

ウェブフォントの変換にはWOFFコンバータを使います。

日本語ウェブフォント作る

もしすでにインストール済みであれば自動的に立ち上がります。
フォント名はJapanSansとしておきました。
あとは「変換開始」をクリックするくらいです。はいできあがり。
できあがったファイルは以下。サンプルのHTMLファイルも書き出されます。
これは必要ないので削除してください。

webfont作成

 

TrueTypeが必要なら、フォントソフトなどで書き出してください。
ここまで30分。そして適用してみたウェブサイトがこちら。
http://webfontfan.com/japansans/

実際には、調整にかなりの時間を要します。
というのもWindowsはフォントレンダリングが独特なので
多くの場合綺麗に表示されないからです。
とくに今回のフォントのように、微妙で、繊細なラインは
表示の調整が難しくなりがちです。
どちらかというとM+の様に水平のラインが平行な方が
調整はしやすいです。
フォントレンダリングの確認はMac、Windowsの各OSや
IE、Safari、Chrome、Operaなどのブラウザで一通り確認します。
あとはiOSやAndroidなどでも実機で確認できたらしておいた方が良いでしょう。

日本語ウェブフォントって何?

日本語ウェブフォント

日本語ウェブフォントのファイルフォーマット

望みの日本語フォントで表示できるウェブフォント

今まではフォントを指定しても、見ている人の環境に同じフォントがインストールされていなければ、表示されませんでした。

そのため、好みのフォントをPNGやJPEGなどの画像に変えて表示していました。しかしそれには多くのデメリットがあります。

 

1.検索エンジンが読めないのでSEO的に不利

2.訪問者が文字サイズを変更・検索・文字をコピーができない

3.ホームページの修正・更新の作業量が増える

4.翻訳・読み上げソフトが使えない

5.サイト全体のイメージを決める本文には使えない

 

しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。
ただ海外ではすでに多くのサイトが取り入れていますが、日本ではまだ殆ど使われていません。それにはいくつか理由があります。まず日本語ファント自体の読み込みが重い(これは改善されつつあります)。有料で使用できるフォントがあるが使用料やアクセス数制限などの問題から、個人サイトでは気軽に使えない。ウェブフォントファンでは、こういった問題も解決していけるように、いろいろな話題を取り上げていきます。

 

日本語ウェブフォントのファイルフォーマット

ウェブフォントのファイル形式

TrueType(.ttf)

アップルコンピュータとマイクロソフトが共同開発した、パソコン環境で一般的なフォーマット。

OpenType(.otf)

TrueTypeの後継フォントとしてアドビ、マイクロソフトが共同で開発した一般的なフォントフォーマット。

EOT(.eot)

Microsoft開発のウェブフォント用フォントフォーマット。IEのみ対応。

WOFF(.woff)

軽量なウェブフォント用に開発されたフォーマット。モダンブラウザーが対応。

SVG(.svg)

以下は各ブラウザでの対応状況

TrueType
(.ttf)
OpenType
(.otf)
EOT
(.eot)
WOFF
(.woff)
SVG Font
(.svg)
IE 4~ × × × ×
IE 9~ × × ×
Chrome 4~ × ×
Chrome 6~ ×
Safari 3.1~ × ×
FireFox 3.5~ × × ×
FireFox 3.6~ × ×
Opera 10~ × ×
Opera 11.10~ ×
iOS4.0~ × × × ×
iOS4.2~ × ×
Android 2.2~ × × ×

この表で分かる通り少なくとも、2つ以上のファイルフォーマットを指定する必要があります。
(iOS4.0やIE9以前は個人的にはこの際、切りすすても良いと思います)

ウェブフォントについて

フロップデザインのサイトのウェブフォントについて(続)

日本語ウェブフォントまとめ+GoogleWebFont

最新WEBFONT事情〜日本語フリーウェブフォントを表示

日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定

FLOP DESIGN

FONTGRAPHIC