標準フォントの拡大は汚い
SEO的に意味があるので＜ｈ＞タグを多用します。するとテキストが大きく表示されます。当然です。ところが日本語はなんとも汚い表示になってしまいます。
これって人に見せるのに失礼ですよね。美的センスやデザイン性やおもてなしの心や恥の概念など、普段私たちが大切にしているものがまるで無視されていますよね。
ホームページやブログは自分用のメモじゃなくて人に見せる前提ですからもう少し綺麗に表示してほしいと切に思いますよね。
企業サイトなんかはデザイナーさんがフォントを画像にして張り込むわけですが、面倒で手間がかかります＝高くつく。
日本語WEBフォント
前置きが長かったですが、そこで日本語WEBフォントです。
仕組み自体は昔からあったのですが、サーバーのオーバーヘッド（前処理時間）やページサイズが大きくなるなどの理由で実用には難がありました。
今も同じですが、ホームページに関するすべてのスピードが上がっているので実用してもほとんど問題はないでしょう。しかし設定が面倒です。
フォント屋さんも早く普及させてフォントを商売にすればよいのに企画力がまったくないですね。素材の一部を提供してgoogleさんにAPIを作ってもらうとか。みんな期待しているのに仕組みなくして商品は売れません。
フォントのインストール
今回はこのフォントをサーバーのthemeフォルダにアップロードしました。
VL-PGothic-Regular.woff
ｃｓｓの設定をします
css内で日本語フォントの宣言をします
テーマの編集をします。まずfilezilaでstyle.cssファイルの属性を７０７にします。
style.cssを開きます。外観→テーマの編集→style.css
前のほうにフォントの定義文を記入します。
/* 日本語フォント */
@font-face {
font-family: VL-PGothic-Regular;
src: url(VL-PGothic-Regular.woff) format(‘woff’);
}
次にｃｓｓ内で使いたい場所で宣言します
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>タグで文字を大きくすることは避けてきましたが、これなら思い切り拡大して＜ｈ１＞から＜ｈ４＞位まで使い分けられますかね。
オーバーヘッドの問題
しかし、やはり最初のページの読み込みに時間がかかる（数秒以内ですが）。フォントがブラウザにキャッシュされてしまえば普通に表示されます。一瞬「フォント読み込み中」とでも表示を出すとか？止めるべきか前進あるのみか。ムムム。
webの文章は、われわれ日本人が、小学校の作文で習いビジネス文書でしごかれて身につけた作法と異なります。英字新聞のような構成がSEO的に有効だからです。まあ、慣れてみれば以下のような英文的な記事の書き方というのも分かり易いかと思うこのごろです。
大見出し
小見出し
小節
小見出し
小節
