無料で使える日本語webフォントの確認


株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

【ご注意】実験的に複数の日本語フォントを読み込むため、表示にかなり時間がかかります。

webフォントとは

ブラウザが表示するwebページの文字は、各デバイスにインストールされているフォントの中からページのcss指定にあわせて選ばれています。WindowsやMac、Linux、iOS、AndroidなどのOSの違いにより、インストールされているフォントにばらつきがあり、webデザイナーが意図したデザインをすべてのデバイスで表示できるとは限りません。

フォント以外でも各デバイス間の差異はあるのですが、せめて同じフォントが使えれば…と考え(たのかどうかは知りませんが)生まれたのがwebフォントです。webフォントは、サーバー上に置かれていて、ブラウザがwebページにアクセスする毎にリンク先から取得するため、どのデバイスでも同じフォントを表示することができます。

統一されたフォントの表示は、webページのブランディングの観点からも重要ですし、デバイス由来以外のフォントを表示することで、他のサイトとの差別化が可能です。また、差別化のための文字の画像化がありますが、それと比較して、後々の修正、変更の際、文字のみなので作業が容易です。SEO的にも有利です。

デメリットは、文字数の多い日本語フォントですので、読み込みに時間がかかり表示が遅くなります。

Googleの無料日本語webフォント

Google Fonts + 日本語 早期アクセス

「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';
  }

 

戻るボタン