Webフォントを使ってキレイで読みやすいページにする!ただし・・・

Google Fonts(Googleフォント)で公開されているWebフォントをつかって、当サイトの(当記事の)表示文字のデザインを変更してみました。

もちろん、パソコン向けの画面のみです。

ちなみに、後述しますが、あまり万人におすすめできるものではありません(^_^;)

Webフォントを使って表示文字がどう変わるか?

アメブロで、Webフォントをつかって、表示文字がどんなふうに変わったかというと(Windows7+Google Chromeで見た場合)・・・

特にフォントを何も指定しない場合

まず、特にフォント名を何も指定しない(つまりデフォルトの)場合は↑こんな感じでした。

「MS Pゴシック」というフォントで表示されるようです。

なんだかギザギザしてるように感じます。

Macだと「ヒラギノ角ゴシック Pro」で表示されるようなので、何もしなくても、きっともっと綺麗に表示されるでしょう。

メイリオフォントを指定した場合

デフォルトのフォントがギザギザなので、僕はWindowsでは「メイリオ」というフォントで表示される設定にしていたのですが、それが↑これです。

ギザギザ感は、ましですね。

個人的には読みやすさも向上しているように感じますので嫌いではないのですが、「ボールド(太字)が汚いなぁ」と常々感じていました

ちなみに、この設定にしたい場合は、CSSに以下のように記述すればOKです。

body {
font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}

なお、この設定は、Macでは(敢えてメイリオをインストールしていない限り)デフォルトと同じ「ヒラギノ角ゴシック Pro」が使われるので、Macで見ている人には何の変化もありません。

Notoフォントを使ってみた場合

メイリオの太字が汚いのが気になるので、最近話題になっている(?)「Notoフォント」を使ってみました。

フォントデータはGoogleのサーバーから読み込めますので、CSSにそれを使う設定を記述するだけで使えます。

何となくですが、Macのヒラギノに似ていますね(気のせい?)

なかなか良さそうです。

でも、欧文(英語や数字)がイマイチな気がします(^_^;)

英語や数字だけ別のフォントにしてみた場合

というわけで、英語や数字の部分だけを「Quicksand」という(たぶん)人気のフォントに変えてみました(IEでは表示されないかも)。

「a」や「1」などを見ると、メイリオやNotoとはデザインがかなり違いますね。

あと、全体的に軽め(細め)なのに見やすく工夫された美しいフォントだと思います。

このフォントもGoogleのサーバーから読み込みますので、CSSに設定を記述するだけで使えます。

まとめ

以上のように、当ブログの表示フォントをWebフォントを使って変えてみました。

フォントを変えるとページの印象もガラリと変わりますので、こだわる方は、Webフォントの利用も検討されてみても良いのではないでしょうか。

ただし、日本語対応のWebフォントは、データサイズが非常に大きく、読み込みに時間がかかります。

なので、ページの表示時間がかかりすぎて読者が逃げてしまう可能性が高まることを知っておいたほうが良いでしょう。

ちなみに、ブラウザのキャッシュにフォントデータが保存されていれば、読み込み時間は劇的に短くなります。

今回、Googleのサーバーからフォントデータを読み込んだのは、世界中で利用者の多いGoogleのサーバーのデータなら、閲覧者のブラウザにキャッシュとして残っている可能性が高いからです。

まぁある程度「可能性が高い」だけで、メイリオやヒラギノのようにOS同梱で必ずパソコンに入っていると行っても過言ではないフォントとは違いますので、読み込み時間は無視できませんが^^;

あと、最近のWindowsとMacには「游ゴシック」のような共通のフォントがインストールされていますので、今後は、そちらがメインになっていきそうです。

最後に、今回使ったWebフォントを使うCSSの設定を紹介します。

でも、利用を検討される場合は、表示が遅くなる可能性をよく考えられて下さいね。

/*
* Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype');
}

/* Quicksand*/
/* vietnamese */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
src: local('Quicksand Light'), local('Quicksand-Light'), url(https://fonts.gstatic.com/s/quicksand/v6/qhfoJiLu10kFjChCCTvGlP8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
src: local('Quicksand Light'), local('Quicksand-Light'), url(https://fonts.gstatic.com/s/quicksand/v6/qhfoJiLu10kFjChCCTvGlD0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
src: local('Quicksand Light'), local('Quicksand-Light'), url(https://fonts.gstatic.com/s/quicksand/v6/qhfoJiLu10kFjChCCTvGlOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v6/NUrn2XQrRfyGZp5MknntaRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v6/s2PXW4WrV3VLrOUpHiqsfRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v6/sKd0EMYPAh5PYCRKSryvW1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
src: local('Quicksand Medium'), local('Quicksand-Medium'), url(https://fonts.gstatic.com/s/quicksand/v6/FRGja7LlrG1Mypm0hCq0Dv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
src: local('Quicksand Medium'), local('Quicksand-Medium'), url(https://fonts.gstatic.com/s/quicksand/v6/FRGja7LlrG1Mypm0hCq0Dj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
src: local('Quicksand Medium'), local('Quicksand-Medium'), url(https://fonts.gstatic.com/s/quicksand/v6/FRGja7LlrG1Mypm0hCq0Dugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
src: local('Quicksand Bold'), local('Quicksand-Bold'), url(https://fonts.gstatic.com/s/quicksand/v6/32nyIRHyCu6iqEka_hbKsv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
src: local('Quicksand Bold'), local('Quicksand-Bold'), url(https://fonts.gstatic.com/s/quicksand/v6/32nyIRHyCu6iqEka_hbKsj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
src: local('Quicksand Bold'), local('Quicksand-Bold'), url(https://fonts.gstatic.com/s/quicksand/v6/32nyIRHyCu6iqEka_hbKsugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* 表示フォントを設定 */
body {
font-family: Quicksand, 'Noto Sans JP', メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}