2017/06/04

webフォントの使い方♡。おすすめ日本語フォント一覧9選+1!とフォントまとめサイト4選。

サイトで表示するコンテンツの一部で個性的な文字装飾をしたいとき、色々なクリエイターが作ったwebフォントがおすすめです。

手書き風や古い印刷風の文字などは標準でインストールされているフォントファイルにはありません。

フォントについて少しだけ

私たちがパソコンやスマホで見ている文字の書式はデバイス(パソコン、スマホ、タブレットなど)に依存しいます。そのため、使っているデバイスにfont-familyで指定したfontファイルがインストールされていないと文字化けなどの不具合が発生します。

font-familyに複数のfont名を指定するのはデバイスのフォントファイルに対応するためです。

webフォントはサーバーにあるフォントファイルを読み込んで表示を実現しているのでデバイスに依存しません。

webフォントの使い方

使いたいwebフォントを見つける前に具体的な使い方を紹介します。

使いたいwebフォントの取得

例えば、使いたいwebフォントがあずきフォントの場合、配布サイトからダウンロードします。
※webフォントといっても通常パソコンなどで使われているフォントファイルと同じ形式です。

配布先:あずきフォント

azuki

webフォント名を確認する方法

CSSでfont-familyに指定するのでフォント名を確認します。サイトにフォント名が明示されている場合もありますが、直接フォントファイルから確認することもできます。

windowsの場合、ファイルをダブルクリックするとwindowsフォントビューアーで表示されます。

azuki

フォント名を見るとあずきフォントとわかります。

※印刷、インストールボタンはクリックしないで下さい。お使いの端末にインストールされてしまいます。

CSS:@font-faceでフォントファイル名を定義

取得したフォントファイルをサーバーにアップロードしてCSSに@font-faceの指定を記述します。

書式

サンプル(例)

CSS:font-familyにwebフォントを指定

font-familyをwebフォントに変更したいCSSコードを定義します。

HTML:サンプル表示

sample

おすすめ日本語webフォント一覧

webフォントを選ぶ前に

webフォントはファイルの種類(拡張子)によってfont formatが決まっています。cssで@font-faceを定義する場合に必要となるので確認していきましょう。

フォントフォーマット 拡張子
WOFF .woff
TrueType .ttf
OpenType .ttf, .otf
Embedded OpenType .eot
SVG .svg, .svgz

参考:CSS Fonts Module Level 3

あずきフォント

azukifont
[第一、第二水準・拡張漢字][英数][ひらがな][カタカナ][商用可]

手書き風のフォント。

女の子が書いた文字風でやわらかい印象をうけます。

CSS

HTML

提供サイト(ダウンロード)

ダウンロード:あずきフォント

機械彫刻用標準書体 M

kougyou
[半角数字][全角数字][半角英字][全角英字][漢字][ひらがな][カタカナ][変体仮名][西夏文字][約物・記号][商用可]

機械彫刻用標準書体とは工業的な彫刻文字を作製するときの標準規格の書体(日本工業規格(JIS))

公共の看板などで見かけたことがある、懐かしい感じのする書体です。

CSS

HTML

提供サイト(ダウンロード)

ダウンロード:機械彫刻用標準書体フォント

はれのそら明朝

harenosora
[ひらがな][カタカナ][漢字][商用可]

角丸系明朝体。

小説やエッセイによさげな日本語フォント。

CSS

HTML

提供サイト(ダウンロード)

※OpenTypeフォント Downloadをクリック。
ダウンロード:はれのそら明朝

ラノベPOP

lanobepop
[数字][アルファベット][記号][ひらがな][かたかな][教育漢字][常用漢字][第一水準漢字][第二水準漢字][商用可]

マジックペンで書いたような日本語フォント。

ラノベにぴいたりなフォントを目的に作られました。

CSS

HTML

提供サイト(ダウンロード)

ダウンロード:ラノベPOPフォントのフリーフォントダウンロード

源暎ゴシックM SemiLight

源暎ゴシックM
[日中韓の漢字を網羅][オープンソース]

Adobeのオープンソースである高品質フォント「源ノ角ゴシック」を改変して作成されたフォント。

丁度よい太さの読みやすいフォントだと思います。

CSS

HTML

提供サイト(ダウンロード)

ダウンロード:【フリーフォント】源暎フォント ダウンロード – 御琥祢屋

JKゴシックL

jkg
[平仮名][片仮名][漢字][商用可]

手書き丸文字風で読みやすいフォントだと思います。

CSS

HTML

提供サイト(ダウンロード)

一番下の方にある「最近のWindows/Mac OSなどでは動作すると思います。Download」の部分でダウンロード。
ダウンロード:女子高生風?の可愛い極細フォント「JKゴシックL」のダウンロード | ふぉんときゅーとがーる

吐き溜

hakidame
[ひらがな][カタカナ][漢字][英字][記号][商用可]

ホラー系コンテンツにマッチするフォント。

CSS

HTML

提供サイト

「ダウンロード(ベクターから)」をクリックしてダウンロードページへ。
ダウンロード:暗黒工房 日本語フリーホラーフォント「吐き溜フォント」

コーポレート・ロゴB

logo
[ひらがな][カタカナ][漢字][英字][商用可]

オープンソースのM+フォント・源真ゴシック・源ノ角ゴシックに会社ロゴタイプ風のひらがな・カタカナを組み合わせたフォント。

CSS

HTML

提供サイト(ダウンロード)

「Bold版ダウンロード(ver. 1.1)」をクリックでダウンロード。
ダウンロード:「コーポレート・ロゴ」フォントのダウンロード

ぼくたちのゴシック2レギュラー

bokur
[ひらがな][カタカナ][漢字][英字][数字][商用可]

少し丸く読みやすい、やわらかい感じのフォントです。

CSS

HTML

提供サイト(ダウンロード)

「OpenTypeフォント Download」をクリックでダウンロード。
ダウンロード:ぼくたちのゴシック2レギュラー | fontopo

07ふぉんとうは怖い明朝体

hhonto
[ひらがな][カタカナ][漢字][英字][数字][記号][商用可]

サーバーへアップロードは禁止なのでwebフォントとしては使えないですが、ローカル(PC)でインストールして作成し、プリントスクリーンで画像データとしてバーナーやロゴ、見出し画像として使えると思います。

CSS

HTML

提供サイト(ダウンロード)

簡単一覧ダウンロード FACEBOOKユーザー用でダウンロードできました。
ダウンロード:ふぉんとうは怖い明朝体フリーフォントダウンロード | フォントな。無料日本語フリーフォント

フリーフォントまとめサイト

FREEフォントケンサク

クリエイター作成のフリーで使えるフォントを紹介しているサイトです。
リンク:FREEフォントケンサク

窓の杜

色々なジャンルのフリーソフトやシェアウェアを紹介しているサイトです。
リンク:窓の杜 – オフィス – 入力・印刷 – フォント

FONT FREE

無料で使える日本語フリーフォント投稿サイト。
リンク:FONT FREE

NAVER まとめ

多くの日本語フリーフォントがNAVERでまとめられています。
リンク:【デザイナー必見】最強の日本語フリーフォントのまとめ – NAVER まとめ

まとめ

多数のクリエイターさんがフリーフォントを提供して下さっているので感謝です。

フリーゆえに漢字対応と記載されていても漢字が表示されないフォントファイルもありました。こちらで紹介しているフォントは簡単な確認をしているので大丈夫だと思います。

商用可で自由に使えるフォントを紹介しているつもりですが、使用される場合には規約の確認をお願いします。

(Visited 2,342 times, 8 visits today)