同じフォントで表示ができるWEBフォントを使う方法を試す

ブラウザで表示するコンテンツのフォントはstyleシートなどで指定したfont-familyの中から「ユーザーのPCにあるどれかの」フォントで表示されることになっています。OSが同じだったらほぼ同じように表示されるはずですが、それでもそれぞれのPCのフォントインストール状態で多少表示が違う可能性があります。ウェブフォントという方法でフォントを指定するとどの環境でも同じように表示されるようなので、ちょっと試してみました。

Webフォントとは？

フォントは通常使っているPC環境にあるフォントを使って表示されています。Webフォントはサーバー側にあるフォントを利用するため、環境により違うフォントで表示されることが少なく※同じ表示ができるようです。
※ブラウザやOSによっては対応していないことがあるため100%ではないみたいです

Wikipediaの説明が分かりやすかったので引用してみます。

Wikipedia Webフォント

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。

そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

ということのようです。このページにいくつかWebフォント提供サービスが書いてありました。

GoogleFonts　が無料っぽく良さそうなのですが、まだ試験運用中のようです。

ウェブフォントファンにある無料日本語ウェブフォントで試してみる

やさしさゴシックなどのフリーフォントを提供している　フォントな。　さんのページを見ていて ウェブフォントファン　というサイトをみつけました。

このページにある

無料WEBフォントを試してみる　をクリック

こういう感じのフォントが使えるようです。

利用規約：商業的な用途に使用することができません。ウェブデザイン等の仕事で利用する場合、会社・ショップなど商業用途のサイト、アフィリエイトが主体のサイトには使用できません。製品版をご購入ください。

このように、本当に使うには製品版を購入する必要があるので注意が必要です。ということで、今回はローカルPCでどんな見た目になるか試してみます。

フリーフォントダウンロード をクリックして保存します。

ダウンロードしたzipファイルを解凍すると

このようにファイルがあります。この中の、

flopdesign-kana.eot
flopdesign-kana.ttf
flopdesign-kana.woff

この３つのファイルを使ってWEBフォントを表示します。

WEBフォントを使えるようにcssを修正する

WEBフォントを試すのに、先日作ったPHPのHTML部分にこのフォントを使う指定をしてみます。
PHPと同じフォルダに先ほどの３つのファイルを置いて、

@font-face {
font-family: 'flopdesign-kana';
src: url('flopdesign-kana.eot');
src: url('flopdesign-kana.eot?#iefix') format('embedded-opentype'),
url('flopdesign-kana.woff') format('woff'),
url('flopdesign-kana.ttf') format('truetype');
}

cssにこの指定を追加します。

body {
font-family: 'flopdesign-kana', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

あとは、bodyに指定してある　font-family　の先頭にこのフォントの指定　flopdesign-kana　を追加、これだけで指定は終了です。

WEBフォントを使った結果を見比べてみる

macbook airをブートキャンプで使っているので、WindowsとMacの表示を見比べます。

WEBフォントを使っていない状態

Windows

Mac

多少、、ですが文字の太さなどが異なっていますね。

WEBフォントを使っている状態

Windows

Mac

まったく同じに表示されました(^^)/

まとめ:WEBフォントはそれほど高く無かったです

有料の購入ページもあります。

WordPressプラグイン版

プロ版(アプリへの埋め込み、WordPressに限らないウェブフォントへの使用)

プラグイン版が2,000円、プロ版が3,800円と正式なサイトで使うならそれほど高い値段でも無いのでデザインにこだわったページを作るときには導入することを検討したいと思いました(^^)/