無料で使える日本語webフォントの確認
【注】実験的に複数の日本語フォントを読み込むため、表示にかなり時間がかかります。
webフォントとは
ブラウザが表示するwebページの文字は、各デバイスにインストールされているフォントの中からページのcss指定にあわせて選ばれています。WindowsやMac、Linux、iOS、AndroidなどのOSの違いにより、インストールされているフォントにばらつきがあり、webデザイナーが意図したデザインをすべてのデバイスで表示できるとは限りません。
フォント以外でも各デバイス間の差異はあるのですが、せめて同じフォントが使えれば…と考え（たのかどうかは知りませんが）生まれたのがwebフォントです。webフォントは、サーバー上に置かれていて、ブラウザがwebページにアクセスする毎にリンク先から取得するため、どのデバイスでも同じフォントを表示することができます。
統一されたフォントの表示は、webページのブランディングの観点からも重要ですし、デバイス由来以外のフォントを表示することで、他のサイトとの差別化が可能です。また、差別化のための文字の画像化がありますが、それと比較して、後々の修正、変更の際、文字のみなので作業が容易です。SEO的にも有利です。
デメリットは、文字数の多い日本語フォントですので、読み込みに時間がかかり表示が遅くなります。
Googleの無料日本語webフォント
「Google Fonts + 日本語 早期アクセス」というGoogleのサイトで、試験的に9種類の日本語webフォントが無料で提供されています。その中から4つのフォントを使いました。
Noto Sans Japanese（テキストの後ろの数字はfont-weightの値です）
コニファとはマツやスギも含まれる針葉樹の総称 100
コニファとはマツやスギも含まれる針葉樹の総称 200
コニファとはマツやスギも含まれる針葉樹の総称 300
コニファとはマツやスギも含まれる針葉樹の総称 400
コニファとはマツやスギも含まれる針葉樹の総称 500
コニファとはマツやスギも含まれる針葉樹の総称 600
コニファとはマツやスギも含まれる針葉樹の総称 700
コニファとはマツやスギも含まれる針葉樹の総称 800
コニファとはマツやスギも含まれる針葉樹の総称 900
M+ 1p
コニファとはマツやスギも含まれる針葉樹の総称 100
コニファとはマツやスギも含まれる針葉樹の総称 200
コニファとはマツやスギも含まれる針葉樹の総称 300
コニファとはマツやスギも含まれる針葉樹の総称 400
コニファとはマツやスギも含まれる針葉樹の総称 500
コニファとはマツやスギも含まれる針葉樹の総称 600
コニファとはマツやスギも含まれる針葉樹の総称 700
コニファとはマツやスギも含まれる針葉樹の総称 800
コニファとはマツやスギも含まれる針葉樹の総称 900
Rounded M+ 1c
コニファとはマツやスギも含まれる針葉樹の総称 100
コニファとはマツやスギも含まれる針葉樹の総称 200
コニファとはマツやスギも含まれる針葉樹の総称 300
コニファとはマツやスギも含まれる針葉樹の総称 400
コニファとはマツやスギも含まれる針葉樹の総称 500
コニファとはマツやスギも含まれる針葉樹の総称 600
コニファとはマツやスギも含まれる針葉樹の総称 700
コニファとはマツやスギも含まれる針葉樹の総称 800
コニファとはマツやスギも含まれる針葉樹の総称 900
さわらび明朝
コニファとはマツやスギも含まれる針葉樹の総称 400
コニファとはマツやスギも含まれる針葉樹の総称 800
head内cssリンク
4つのGoogle webフォントcssを<head>内で読み込んでいます。<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
html（部分）ソース
これは、「Noto Sans Japanese」の場合ですが、classでfont-familyとfont-weightを100から900まで指定して流用しています。「さわらび明朝」のみfont-familyが400と800の2種類です。
<div class="box fsize28"> <p class="nsj fw-100">コニファとはマツやスギも含まれる針葉樹の総称<span> 100</span></p> <p class="nsj fw-200">コニファとはマツやスギも含まれる針葉樹の総称<span> 200</span></p> /*-- 中略 --*/ <p class="nsj fw-800">コニファとはマツやスギも含まれる針葉樹の総称<span> 800</span></p> <p class="nsj fw-900">コニファとはマツやスギも含まれる針葉樹の総称<span> 900</span></p> </div>
CSSソース
各webフォントを適用する箇所（このサンプルではp要素）にclassで指定します。.nsj {
font-family: 'Noto Sans Japanese';
}
.m1p {
font-family: 'Mplus 1p';
}
.m1c {
font-family: 'Rounded Mplus 1c';
}
.sawarabi-m {
font-family: 'Sawarabi Mincho';
}
