日本語ウェブフォント フリーフォント

フロップデザインフォント

フロップデザインWEBフォント

日本語ウェブフォントフリーフォント

水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語WEBフォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたWEBフォントです。

 

フォント詳細
収録フォント形式：（ ttf / woff / eot ）
ワードプレスでご使用の場合はプラグイン版をご使用ください
フォントデータの複製、改変、再配布を禁ずる。
当フォントを使用した際に発生した機器およびソフトウエアの故障、誤動作、誤出力、ウイルスへの感染などに関して責任を負わないものとする。
利用規約：商業的な用途に使用することができません。ウェブデザイン等の仕事で利用する場合、会社・ショップなど商業用途のサイト、アフィリエイトが主体のサイトには使用できません。製品版をご購入ください。

フリーフォントダウンロード

フロップデザインWEBフォントをウェブフォントとして使う方法

1.サブセット化

日本語フォントは、ひらがな・カタカナ・漢字が含まれるため、ファイル容量が大きくなり読み込みに時間がかかります。読み込み時間の短縮にはサブセット化が必要です。簡単に言えば、使用する文字だけを抜き出したフォントファイルを作成することです。当フォントはこれが、すでに行われており、何もする必要がありません。

2.CSSの指定

まずCSS3の@font-faceでフォントファイルを指定する必要があります。
@font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。
パスはアップロードするディレクトリのパスなので、各々異なります。
代表的な記述だと以下の様になります。

@font-face {
font-family: ‘flopdesign-kana’;
src: url(‘パス/flopdesign-kana.eot’);
src: url(‘パス/flopdesign-kana.eot?#iefix’) format(‘embedded-opentype’),
url(‘パス/flopdesign-kana.woff’) format(‘woff’),
url(‘パス/flopdesign-kana.ttf’) format(‘truetype’);
}

次にCSSでフォントを適応させます。

h1タグであれば

h1 {
font-family:’flopdesign-kana’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku  Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif ;
}

本文（body）であれば

body {
font-family:’flopdesign-kana’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif ;
}

のような記述がスタンダードでしょう。
flopdesign-kana以外のフォントも指定してあります。これはサブセット化した以外のフォントは、OS標準の、このフォントで表示しますよという意味です。

OSに標準で搭載されているフォントについては以下になります。

OS フォント名
 Windows 8.1 游明朝体
游ゴシック体
メイリオ
MS ゴシック
MS 明朝
 Windows 8 / 7 / Vista メイリオ
MS ゴシック
MS 明朝
 Windows XP MS ゴシック
MS 明朝
 MacOS X 10.9以降 游明朝体
游ゴシック体
ヒラギノ角ゴシック ProN
ヒラギノ明朝 ProN
ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
 MacOS X 10.5以降 ヒラギノ角ゴシック ProN
ヒラギノ明朝 ProN
ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
 MacOS X 10.4 ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
 iOS HiraKakuProN-W3
HiraMinProN-W3
 Android 4.0 モトヤLシーダ3等幅
モトヤLマルベリ3等幅

 

ウェブフォントとして使えそうな日本語フォント

webフォントとして使用可能な日本語フォントは、実際の所はライセンスを確認しても判断が難しいところがあります。以下にwebフォントとしてライセンス上使用可能かもしれないフォントをあげておきます。webフォントとして使用するには、少なくとも以下の使用ライセンスに従う必要があります。

・サーバにアップしオンラインでの再配布・使用が可能
・ファイル形式変換が可能（フォントファイル自体の変更）
・サブセット化（文字のグリフの変更が可能）
・商用で使用する場合は、その許可が可能


フォントの使用許諾を熟読した上で使用してください。ウェブフォントについては、多くの場合、具体的にきっちり明記されているわけではありません。またライセンスは変更される可能性もあります。必ず当サイトの情報で無く、配布元のサイトの情報をご確認ください。

M+ Fonts
https://mplus-fonts.sourceforge.jp/

Rounded M+
https://sites.google.com/site/roundedmplus/

Japansans
https://webfontfan.com/japansans/

やさしさゴシック
https://www.fontna.com/blog/379/

明朝體フォント むつき
https://mandel59.github.io/mutsuki/index.html

衡山毛筆フォント
https://opentype.jp/kouzanmouhitufont.htm

青柳衡山フォント
https://opentype.jp/aoyagikouzanfontt.htm

Noto Sans(google)
https://www.google.com/get/noto/#/family/noto-sans

 

  1 comment for “日本語ウェブフォント フリーフォント”

  1. Pingback: はじめての Web Font (3) – 日本語フォントを使ってみよう – 凪の渡し場

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA