2019.10.18

【Web】日本語の無料（フリー）フォントをWebフォントとして使用する方法

日本語のフリーフォントをサーバにアップしてWebフォントとして使用する方法。
※Webフォントとして使用する際にはライセンス項目（再配布OK／改変OK）の確認。

【1】Webフォントとして使用可能な日本語フリーフォントを探す

Webフォントとして使用するには使用ライセンスに従う必要があります。
・サーバにアップしオンラインでの再配布・使用
・ファイル形式変換
・サブセット化
・商用使用（商用で使用する場合）

良く使うフォントは
・もじワク研究
・モダンな「コーポレート・ロゴ」フォント無料ダウロード

日本語フリーフォントを探すには
・2019年用、日本語のフリーフォント377種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
・モジザイ - 日本語フリーフォントを簡単検索！

【2】フォントのコンバート

WOFFコンバータやサブセットフォントメーカーを利用してotfやttfファイル等を元にwoff、woff2、eotのファイルを作成

【3】CSSの記述

※パスはCSSからのパス。

@font-face{ 
    font-family: 'myWebFont'; /* 名前 */
    src: url('font/●●●.eot'); /* IE9以上用 */
    src: url('font/●●●.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
        url('font/●●●.woff') format('woff'), /* モダンブラウザ用 */
        url('font/●●●.ttf') format('truetype'); /* iOS, Android用 */
    font-weight: normal; /* 念の為指定しておきます */
    font-style: normal;
}
.myWebFontClass {
    font-family: 'myWebFont';
}

【参考】
・フォントをサーバーにアップしてWebフォントとして使う手順と方法を解説
・自社サーバーにフォントをアップロードして、Webフォントを使用する方法

＃フォント