同じフォントで表示ができる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

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

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

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

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

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

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

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

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


Windows

Mac

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

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


Windows

Mac

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

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

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

WordPressプラグイン版

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

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る