2019年10月18日
【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フォントを使用する方法
関連記事
-
【FONT】自分のPCにインストールされているフォントを一覧表示する方法
【FONT】自分のPCにインストールされているフォントを一覧表示する方法
イメージに近いフォントがあるか確認したい時等、自分のPCにインストールされているフォントサンプルを一覧で表示する方法をメ・・・ -
【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)
【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)
WordPressのメディアでファイルをアップロードする際に、最大アップロードファイルサイズがアップロードするファイルサ・・・ -
【Web】iPhoneで文字サイズがおかしい場合に、文字の自動調整機能をオフにする方法
【Web】iPhoneで文字サイズがおかしい場合に、文字の自動調整機能をオフにする方法
iPhoneのSafariで文字サイズが揃わない(フォントサイズがばらばらになってしまう)ということがあり、解決までに色・・・ -
【DESIGN】頻繁に使っているWebデザインのギャラリーサイト
【DESIGN】頻繁に使っているWebデザインのギャラリーサイト
Webサイトをデザインする際に参考にさせていただいているサイトをメモメモ。 ■I/O 3000 | Webデザインギャラ・・・ -
【WordPress】Smart Custom Fieldsで作成したカスタムフィールドをMW WP Formの選択項目に使用する方法
【WordPress】Smart Custom Fieldsで作成したカスタムフィールドをMW WP Formの選択項目に使用する方法
普段よくお世話になっているWordPressプラグイン、繰り返しのカスタムフィールドを作成できる「Smart Custo・・・ -
【XAMPP】任意のディレクトリをバーチャルホストにする方法
【XAMPP】任意のディレクトリをバーチャルホストにする方法
Cドライブ直下にXAMPPをインストールした場合は、 C:xampphtdocs にデータを保存するとPHP等の確認はで・・・