そろそろ行けるか?Webフォント

2016/03/15 サイト制作, 技術系 投稿者:竹内

img_webfonts02

Webサイトを制作する上で、「どのブラウザー、どのOSでも問題なく表示される。」ということがHTMLコーダーに求められます。そこで大きな壁となるのが「フォント」です。
(本当は古いIEが一番の壁なのですが、古いIEのサポート打ち切りなどにより淘汰されつつあります。)

最近では「游ゴシック体」「游明朝体」が出てきたおかげで、そこそこ新しいOSを使っている人であればWindowsでもMacでも同じフォントでサイトを見ることができるようになってきました。
以前、このWindows、Mac共通フォントが出るちょっと前に「Webフォント」が流行りだして挑戦したことがあり、その時は日本語(主に漢字)の特異性により断念し、ひらがなとカタカナ英数字、アイコンフォントと呼ばれるアイコンのみの実装となりました。

しばらく共通フォントを使い制作を行ってきたのですが、最近では日本語のWebフォントも充実しているのではないかと調べてみたところ、使い勝手の良さそうなのがいくつかあったので、この場を借りて再挑戦してみたいと思います。

Webフォントとは

通常Webサイトを閲覧する際のフォントは、「CSSで指定されたWindowsやMacの中にあるであろうフォント」を指定して、ブラウザーが各Windows・Mac内から引っ張ってきます。
Webフォントではサーバー上(Web上)においてあるフォントデータを用いてブラウザーが表示します。各Windows・Mac内にあるかどうか分からない「無難」なフォントを使うより、制作側が意図したフォントを使うことができます。

Webフォントのメリット・デメリット

使う上でおさえておかなければならないメリットとデメリットはどうでしょうか。
しっかり把握した上で使っていきましょう。

Webフォントのメリット

  • WindowsやMac、スマートフォン(iOS、Android)などOSを意識する必要がない
  • 文字幅や大きさの違いによって意図せず改行したり、はみ出したりすることがない
  • 制作側(主にデザイナー)の意図したフォントで表示される

Webフォントのデメリット

  • ブラウザーがフォントデータをダウンロードするのでサイト表示に時間がかかる(特にスマートフォン)
  • 古いブラウザーが対応していない(CSS3対応必須)
  • 日本語環境においてWebフォント側で用意されていない漢字を使った場合に別のフォントに代替される

利用条件・ライセンスに注意

フォントの利用の際にはフォント制作者からの注意点など、使って大丈夫かどうかは必ず確認しましょう。
写真や画像や文章などと同じです。制作者に心から「こんな便利なフォントを作ってくれてありがとう!」と感謝の気持ちを忘れずに使わせて頂きましょう。

Webフォントを使ってみよう

img_webfonts01
早速使ってみましょう、今回使用するのは『kazesawa(かぜさわ)フォント』です。

公式サイトはこちら。kazesawa(かぜさわ)フォント

こちらのフォントは導入方法までわかりやすく説明してくれるので、Webフォント初心者の私でも導入できそうです。

Kazesawa フォントをダウンロードし、サーバーへ設置

公式サイトからダウンロードサイトへ行き、zip形式のファイルをダウンロードします。
ライセンス内容を確認したうえで制作者に感謝しつつ、フォントデータをサーバーへアップロードします。
今回はcommon/以下にfontsというディレクトリを作成し、そこへ設置しました。
CSSはcommon/styles/以下に配置してあります。

CSSの変更

以前使用したデモページを流用します。
CSSの最上部に以下を設置し、Webフォントで表示したい場所をkazesawaフォントに設定します。今回はclass指定で設定しています。

私はここでつまずいた!

img_webfonts03

検証当初、上記内容ではIE、GoogleChrome、SafariではWebフォントで綺麗に表示されますが、Firefoxではなぜか表示されませんでした。
その後の検証で、『Firefoxのバージョンの中にWebフォントが正常に表示できないものがあるらしい。』ということがわかりました。
検証を始めた時(2016年3月10日)のFirefoxのバージョンは「44.0.2」今現在(2016年3月15日)記入している時のバージョンは「45.0」、バージョン45.0では正常に表示されました。
この数日、Webフォントが表示されなくて試行錯誤を重ねていたのですが原因はFirefoxのバージョンだったというオチです。

まとめ

アルファベットのみで形成される海外サイトとは違って、日本語には漢字が存在するためWebフォントの浸透は世界に比べて出遅れた感はあります。
出遅れている間に共通フォントが出現して必要性は薄れてきましたが、1フォントで全てを表現するのもデザイナーとしては物足りないのではないでしょうか?
そういった意味でも共通フォントとは別のフォントでOS、ブラウザーを問わず同じ表示を実現できるのは大きいと思います。

今回Webフォントの導入に再挑戦し、Firefoxのバージョンによるバグか何かで表示できないという形でつまずいたのですが、良いタイミングでバージョンの更新となり正常に表示されました。
Webフォントのメリット・デメリットを把握して、共通フォントとの使い分けでより良いWebサイト制作が出来ればと思います。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)