こんにちは、◯◯です。
みなさん、もちろんwebフォントはご存知ですよね。
国内の和文フォントでもFONT+、TypeSquare、デコもじ、アマナイメージズ WEBフォントなど充実し、利用しているサイトもちらほら見かけるようになってきました。
知ってるけど、導入はしてないなぁ、という方が多いのではないでしょうか。
今回はwebフォントの紹介と、超絶簡単に導入できるgoogle web fontをサイトに導入する方法をご紹介します。
■webフォントって？
Webサイトにオリジナルのフォントを埋め込む技術です。
WindowsではＭＳ ＰゴシックとかArialとかVerdanaが標準フォント、macではOsakaとかヒラギノ角ゴなんかですね。
font-family : “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
こんなかんじでベースにしてるデザイナーもいるかと思います。
■webフォントのメリット
・表現力の多様性
→デバイスフォントに依存しないので、サイトにあわせた文字表現が可能になります。
・テキストデータなのでSEOに有利。
→Googleは「テキストを画像置換する手法」については非推奨で、
「Webフォントを使ってテキストをきれいに見せる手法」を推奨していますね。
・コピペが可能
→テキストなのでもちろんコピペが可能です。
引用されやすいので、twitter,tumblrなどドンと来いですね。
・修正が楽ちん
画像を修正→書き出し→サーバーにアップ
という作業はなくなり修正が2秒ですね。
※クライアントに「キャッシュ消してみてもらえますか？」というやり取りもなくなる！？
・自動翻訳にも対応。
といっても当然webフォントにもデメリットもあるわけで、
以下、webフォントのデメリットについても触れておきます。
■webフォントのデメリット
・和文フォントではデータが重く読み込みに時間がかかる。
→前述のwebフォントサービスなどでは、WEBページ内で使われている文字だけを抽出して、フォントデータだけを読み込む処理をしていますが、欧文フォントの数キロバイトに比べるとやはり和文のほうが重たく、読み込みに時間がかかってしまいますね。
・ブラウザによって差異が生じる
webフォントは古いブラウザも含め対応はしていますが、どうしても表示の違いが出てしまうので、検証に時間がかかってしまいます。
※クライアントとのコンセンサスはディレクターの手腕に期待しましょう。
というメリット、デメリットを踏まえつつ、今回はgoogle web font をさっくり簡単導入してみましょうか。
■google web fonts とは
Google Web FontsはかのGoogle様が提供しているwebフォントサービスで、他のフォント提供サービスと比較しても登録が不要などとても簡単に利用できます。
導入方法はざっくりと、
1.選ぶ
2.コピペ
3.cssあてる
と超絶簡単3ステップ。
1.選ぶ
こちらがgoogle web fonts の画面。
まぁフィルタやらソートがあるので、使いたいフォントを探して「Add to Collection」をクリック。
すると、選んだフォントたちが集まるエリアが表示されるので良ければ「use」をクリックしましょう。
レビューが表示されましたね。
選んだフォントの中に太さなどいくつか書体があればこちらで選択します。
右側にページの読み込み時間の目安となるメーターが表示されて便利ですね。赤にならない程度に選ぶとよいです。
はい、ここまでで選び終わりました。
2.コピペ
先ほどの画面で下にスクロールすると、コードがありますので、
ここをコピーして、htmlに貼り付けます。
はい、コピペ終了。cssがインストールされます。
3.cssあてる
さらに下にスクロールすると、fontの指定方法が記載されているので、
cssでclassをなどをあてると、はい、終了です。
ということで、つくってみたメタリカがこちら。
フォントで印象はだいぶ変わりますね。
みなさまも積極的にwebfontを使ってみてはいかがでしょうか。
そんじゃーね☆
poiblo 