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

日本語のフリーフォントをサーバにアップしてWebフォントとして使用する方法をメモメモ

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

url('font/●●●.otf') format('opentype')
url('font/●●●.svg') format('svg')

【参考】
・日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com
・自社サーバーにフォントをアップロードして、Webフォントを使用する方法