Google Web フォントの日本語向けのものを実際にホームページを作成して比較してみた。

Google Web Fonts 日本語の比較と設定

として、作成してみる。設定ですんなりとできなかったのですが、なんとかここまで作りました。

この頁のheadには

<link REL="stylesheet" href="/css/google-web-font.css" TYPE="TEXT/CSS">

として、webfontsの設定をし、そのcssには

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c);
@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(https://fonts.googleapis.com/css?family=Sawarabi+Mincho);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url(http://www.can-chan.com/fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.woff) format('opentype');
}

.wf-mplus1p { font-family: "M PLUS 1p"; } /*font=M PLUS 1p*/
.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; } /*font=M PLUS Rounded 1c */
.wf-hannari { font-family: "Hannari"; } /* font=はんなり明朝 */
.wf-kokoro { font-family: "Kokoro"; } /* font=こころ明朝 */
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; } /* font=さわらび明朝*/
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; } /* font=さわらびゴシック*/
.wf-noto sans jp { font-family: "Noto Sans JP"; } /* font=Noto Sans JP （源ノ角ゴシック） */
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; } /* font=Noto Sans Japanese （源ノ角ゴシック）*/
.wf-notoserifjapanese { font-family: "Noto Serif Japanese"; } /* font=ダウンロードした Noto Serif(源ノ明朝) */

と設定した。

比較的、私の注目している識別観点からすると「さわらび明朝」フォントが、ひらがな、カタカナ、漢字、英数文字など全体的に良かった。

No tags for this post.