日本語WEBフォントの利用(1)無料フォント

標準フォントの拡大は汚い

SEO的に意味があるので<h>タグを多用します。するとテキストが大きく表示されます。当然です。ところが日本語はなんとも汚い表示になってしまいます。

どんなときもwifi

これって人に見せるのに失礼ですよね。美的センスやデザイン性やおもてなしの心や恥の概念など、普段私たちが大切にしているものがまるで無視されていますよね。

ホームページやブログは自分用のメモじゃなくて人に見せる前提ですからもう少し綺麗に表示してほしいと切に思いますよね。

企業サイトなんかはデザイナーさんがフォントを画像にして張り込むわけですが、面倒で手間がかかります=高くつく。

日本語WEBフォント

前置きが長かったですが、そこで日本語WEBフォントです。

仕組み自体は昔からあったのですが、サーバーのオーバーヘッド(前処理時間)やページサイズが大きくなるなどの理由で実用には難がありました。

今も同じですが、ホームページに関するすべてのスピードが上がっているので実用してもほとんど問題はないでしょう。しかし設定が面倒です。

フォント屋さんも早く普及させてフォントを商売にすればよいのに企画力がまったくないですね。素材の一部を提供してgoogleさんにAPIを作ってもらうとか。みんな期待しているのに仕組みなくして商品は売れません。

フォントのインストール

今回はこのフォントをサーバーのthemeフォルダにアップロードしました。

VL-PGothic-Regular.woff

http://vlgothic.dicey.org/about.html

 

cssの設定をします

css内で日本語フォントの宣言をします

テーマの編集をします。まずfilezilaでstyle.cssファイルの属性を707にします。

style.cssを開きます。外観→テーマの編集→style.css

前のほうにフォントの定義文を記入します。

/*  日本語フォント */
@font-face {
font-family: VL-PGothic-Regular;
src: url(VL-PGothic-Regular.woff) format(‘woff’);
}

 

次にcss内で使いたい場所で宣言します

 

h1, h2, h3, h4, h5, h6, #comment-header {
color: #F60;
/*    元    font-family: “Droid Serif”, serif; */
        font-family: VL-PGothic-Regular;
        font-weight: bold;
line-height:1.23;
margin-bottom:10px;
}

 

打消しの行を下線の行に置き換えました。

結果は大成功です。今までは<h>タグで文字を大きくすることは避けてきましたが、これなら思い切り拡大して<h1>から<h4>位まで使い分けられますかね。

image_thumb.png

オーバーヘッドの問題

しかし、やはり最初のページの読み込みに時間がかかる(数秒以内ですが)。フォントがブラウザにキャッシュされてしまえば普通に表示されます。一瞬「フォント読み込み中」とでも表示を出すとか?止めるべきか前進あるのみか。ムムム。

 

webの文章は、われわれ日本人が、小学校の作文で習いビジネス文書でしごかれて身につけた作法と異なります。英字新聞のような構成がSEO的に有効だからです。まあ、慣れてみれば以下のような英文的な記事の書き方というのも分かり易いかと思うこのごろです。

大見出し

小見出し

小節

小見出し

小節






bitFlyer ビットコインを始めるなら安心・安全な取引所で



ビットコイン取引高日本一の仮想通貨取引所 coincheck bitcoin


簡単安心!ビットコイン取引所 coincheck