Web Fontのいいところ&Luxeritasで使えるWeb Font

WordPress, ルクセリタス, ウェブサイト作成

web font

LuxeritasだけでなくSimplicityもカスタマイザーからWeb Fontがプリセットされて使えるようになって、利用している人も増えてますね。

Webfontの導入自体は簡単ですが、比較して自分のサイトにマッチするものを手軽に選べるのでとても便利です。

そんなWeb Fontの特徴とLuxeritas・Simplicityで使えるWeb Fontのサンプル画像を掲載しました(サンプルはWebfontのみ。MacやWindowsに付属のものは現在は含みません)。

Web Fontのいいところ

Web Fontはフォント自体がきれい、デバイスごと差異がなくなるというメリットがあります。

これまで画像で表示していた部分をテキスト化できる

デバイスごとの差がなくなるため、これまでデザインを考慮して画像にしていた文字をテキストに置き換えることができます。

画像でなくテキストにできることはSEO上の大きなメリットとなります。

Font-weightが反映される

Web Fontなら(フォントの太さのバリエーションが多いため)太さをこまかく指定できます。

テスト投稿ですよ ABC abc 123 font-weight:100
テスト投稿ですよ ABC abc 123 font-weight:200
テスト投稿ですよ ABC abc 123 font-weight:thin
テスト投稿ですよ ABC abc 123 font-weight:300
テスト投稿ですよ ABC abc 123 font-weight:400
テスト投稿ですよ ABC abc 123 font-weight:normal
テスト投稿ですよ ABC abc 123 font-weight:500
テスト投稿ですよ ABC abc 123 font-weight:600
テスト投稿ですよ ABC abc 123 font-weight:700
テスト投稿ですよ ABC abc 123 font-weight:bold
テスト投稿ですよ ABC abc 123 font-weight:800

フォントウェイトが多数用意されているWeb Fontはメリハリがつけやすいんです。必ずしも100単位でなく450があって他のがないフォントセットもあるので確認は必要です。

Web Fontのデメリット

Web Fontを利用する際のデメリットは大きいです。とくに日本語の場合は「かな」、「カタカナ」、「漢字」があるため、フォントセットのサイズが大きくなります。

読み込みに時間がかかる

端末にないフォントをウェブ経由で読み込むわけですから読み込みに時間がかかります。

利用する文字だけ抜き出したサブセットを作ってということもありえますが、手間がかかるためデザインが重要なサイトでないとまず無理。

キャッシュを圧迫する

閲覧者のブラウザーのキャッシュにフォントが残っていれば表示速度の問題はなくなります。ただし、その分閲覧者のディスクを消費することになります。

解決策

解決策は二通り。

◎必要な分だけ抜き出したウェブフォントを作成する。

必要な分だけ抜き出せば軽くなります。

◎多くの人が使っているフォントを自分のサイトでも使う

こうすれば閲覧者のブラウザーキャッシュにあるフォントを利用するので早くなるはず。そのうえで太さがたくさんあるからといってすべて使うと重くなるので、使う太さは選んでおく。

Luxeritas / Simplicity で使えるWeb Font

Luxeritas / Simplicityの外観カスタマイズで選択できるフォント(どのフォントでもCSSで指定すれば自由に使えます)。

Luxeritas はMac と Windows 標準のフォントのプリセットがあるのが特徴ですが、そちらは今回は掲載していません。

日本語

Noto Sans Japanese

Luxeritas / Simplicity
[詳細]
M+ 1p

Luxeritas / Simplicity
[詳細]
Rounded M+ 1c

Luxeritas / Simplicity
[詳細]
さわらびゴシック

Luxeritas / Simplicity
[詳細]
さわらび明朝

Luxeritas / Simplicity
[詳細]
はんなり明朝
web font
Simplicity
[詳細]
こころ明朝
web font
Simplicity
[詳細]

Simplicityで使えるNoto Sans JP(源ノ角ゴシック)は、Noto Sans のAdbe版?フォントウェイトや収録されている文字に違いがあるようですが、基本的には変わらないみたい。

ローマ字

Roboto

Luxeritas
[詳細]
Roboto Slab

Luxeritas
[詳細]
Open Sans
web font
Luxeritas
[詳細]
Source Sans Pro
web font
Luxeritas
[詳細]
Noto Sans
web font
Luxeritas
[詳細]
Nunito

Luxeritas
[詳細]
Merriweather
web font
Luxeritas
[詳細]
Vollkorn
web font
Luxeritas
[詳細]
Sorts Mill Goudy
web font
Luxeritas
[詳細]