英語・日本語の無料でかわいいフリーフォントサイト 漢字や手書きも

画像:英語も日本語もOK、おしゃれでかわいいフリーフォントサイト

この記事では無料でダウンロード出来て商用利用可能なフリーフォントやフリーフォントサイトを紹介しています。
英語の筆記体でかわいいフリーフォント、漢字や毛筆の日本語のフリーフォントなどもあります。

筆記体フォントや可愛いフォントだけでなく、おしゃれでかっこいいフォント、手書き風フォント、郷愁を誘うレトロフォントなど実際に使えるものに絞りました。

デザインのクオリティをグッと底上げしてくれるフォントの影響力は計り知れません。

デザイナーでなくともワードやパワーポイントなど、ビジネスシーンでフォントを活用すれば資料としてのクオリティが上がります。ブログやウェブサイトならアイキャッチ画像やバナーなどで使えますよね。

後半では持ってると便利なフォントも紹介しています。

FLOP DESIGN

画像:フロップデザイン プロ作ったフォントが利用できるフリーフォントサイト
FLOP DESIGN

FLOPFLOP DESIGN フロップデザイン:DTP、ロゴデザイン等を制作しているデザイン事務所の方が作られたフォント。個人サイトですが素敵なフォントが揃っています。

フロップデザインの製作のテーマは「クリエイターの創造力をかき立てる」。無料ダウンロード版と製品版があります。

プロが作っているだけに無料ダウンロード版でも十分に使ってみる価値はあります。説明で使われているイラストからフォントのイメージが伝わってきます。

リンク先:フロップデザイン

サイトの特徴

フリーフォントの無料ダウンロード数は250種。ポップなフォント、手書き風、欧文フォント、日本語かな書体、漢字のフリーフォントなど用途に合わせたものが使えます。

無料版は、製品版に比べれば色々とフォントの中身や利用の仕方に制限があります。ですがクオリティは高いので一度使って見ては如何でしょうか。

フォントのダウンロードはどこから?

ページ上部にある「フリーフォント」メニューからページへ行けます。

フォントのテイストをイメージしたイラストが並んでおり、クリックすると詳細が見れます。ページ内の下部に「製品版の購入」「無料ダウンロード」ボタンがあります。

フォントの使用方法

掲載されるフォントは月替わりになっており、過去のものは「ユーザー登録」をする必要があります。

個人利用出来ますが、どこまでが個人利用なのかは「フリーフォント使用許諾」でご確認下さい。不安なら商用利用可能なダウンロード版を購入してくださいね。

FREEフォントケンサク

画像:FREEフォントケンサク 日本語のフリーフォント検索サイト
FREEフォントケンサク

FREEフォントケンサク:日本語のフリーフォントは絶対数が少ないのですが、そんな日本語フォントが沢山集まったリンク集サイト。有名なサイトなのでデザイナーならずともおすすめです。

リンク先:FREEフォントケンサク

サイトの特徴

何といっても日本語フォントの多さが魅力です。「手書き風」「毛筆体」「角ゴシック「丸ゴシック」「明朝体」など豊富に揃っています。

もちろんカテゴリーや書体のイメージで検索が出来るので探すのも簡単。「かわいい」「レトロ」「おしゃれ」などのキーワード検索が便利です。

フォントのダウンロードはどこから?

フォントを選択すると、見た目だけでなく、どんな文字が収録されているのか詳細が見れます。

ページ下部に対応OSや配布元などの記載があります。その下に「ダウンロード」ボタンがあります。

このページから直接ダウンロード出来ない場合は、配布元からダウンロード出来ます。

フォントの使用方法

フリーフォントを集めたリンクサイトなので基本的に商用利用はOKですが、当然何をやっても良い訳ではありません。
必ずこちらの利用規約を守ってくださいね。

Google Fonts

画像:Google Fontsは無料で使えるフォント ダウンロードもウェブフォントもOKです。

Google Fonts:Googleが提供する無料のフォントサービス。様々な言語に対応しており、漢字の日本語フォントも沢山あります。
ダウンロードだけでなく、Webフォントにも対応しています。font-familyで「Noto Sans JP」などはよく使いますよね。

リンク先:Google Fonts

サイトの特徴

英語などかっこいい外国語が多いですが、もちろん日本語フォントもあります。サイトは細かな解説があまり無いので最初は戸惑うかもしれません。ですが慣れれば難しい訳では無いので、まずはページ上部から言語やカテゴリーなどを切り替えてフォントを探してみて下さいね。

テキストを入力してプレビュー出来るので便利です。また、フォント名がローマ字表記でも日本語に対応していれば、きちんと日本語でもプレビュー出来ます。

フォントを選ぶ際のポイントの1つにフォントファミリーがあります。つまり書体の太さのバリエーションです。同じ書体でも細い物や太い物しかない場合、使い所が限られてしまいます。
太さが複数あると、見出しや本文などで使えるので統一感が出ます。

フォントのダウンロードはどこから?

気になるフォントを選択すると、詳細ページに入ります。ダウンロードしたい方は画面右上から。Webフォントを使い方は画面一番下から設定すると、画面右にソースコードが表示されます。一応ここからもダウンロード出来ます。

Webフォントなら読み込む際に使いたい文字の太さを複数設定出来ます。後はCSSのクラス指定時に、font-familyでそのフォント名とウェイトの指定をします。

ダウンロード時に読み込ませるWebフォントの詳細を設定出来るのは便利ですね。

フォントの使用方法

これらのフォントは、Open Font Licenseの下でライセンスされています。 印刷物、デジタル、商用など、製品やプロジェクトで自由に使用できます。

Adobe Fonts

画像:adobe fonts商用も個人用も利用可能
Adobe Fonts

Adobe Fonts:ご存じの方も多いアドビフォントです。Creative Cloudを利用している方は、数千を超えるフォントが無制限に使えます。アカウントを持っていれば商用にも個人用にも利用可能。もちろんWebフォントだって使えます。

リンク先:Adobe Fonts

サイトの特徴

英語以外の外国語はもちろん、日本語フォントも沢山あります。きちんと管理されているので、クオリティ的にも安心です。

分類ごとや書体で絞り込んだり、サンプルのテキストを入力して試す事も出来ます。
無駄にダウンロードする事も無いので便利です。

フォントを選ぶ際のポイントの1つにフォントファミリーがあります。つまり書体の太さのバリエーションです。同じ書体でも細い物や太い物しかない場合、使い所が限られてしまいます。
太さが複数あると、見出しや本文などで使えるので統一感が出ます。

フォントのダウンロードはどこから?

画像:Adobe Fontsでフォントを使える様にするには?

気になるフォントを選択すると、詳細ページに入ります。正確に言うとダウンロードでは無く、「アクティベート」と「Webフォント」のどちらかを選びます。

アクティベートは、PhotoshopやIllustratorなどアドビ製品で使える様に認証する事。クリックするだけで「有効」になります。

Webフォントでは、まず「プロジェクト」を作成します。このプロジェクトにフォントを追加して管理するイメージです。

新規プロジェクトを作るか既存のプロジェクトを選ぶとソースコードが表示されます。フォントを Web ページで使用するには、このコードを HTML の <head> タグ内にコピーします。

フォントの使用方法

Creative Cloudを利用している限り商用にも個人用にも利用可能です。

ただし、Webフォントに関してはライセンスの問題があり、クライアントサイトではそのまま使用するのは難しいかも知れません。
その場合は自社サイトで使うか、Google Fontsの方が良いと思います。

FONT FREE

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

FONT FREE:無料で使える日本語フリーフォント投稿サイト。こちらも様々なテイストの日本語フォントが沢山集められたサイトです。

リンク先:FONT FREE

サイトの特徴

投稿サイトなので掲載されている数は多いですが、玉石混交といった感じです。「ひらがな」や「カタカナ」だけだったり、漢字まで揃っているなど様々なのでそこは注意が必要です。タグ付けされているので、一覧から見分ける事も出来ます。

「かわいい」「レトロ」「おしゃれ」などのキーワードでの検索が便利です。

ページ内に対応OSや配布元などの記載があります。

フォントのダウンロードはどこから?

基本的に配布元へ行ってダウンロードする必要があります。また、個人利用のみや商用利用OKなど、利用条件はバラバラなので要確認です。

フォントを選択すると、見た目だけでなく、どんな文字が収録されているのか詳細が見れます。

ダウンロードするのにアカウントが必要だったり、特定の条件を求められる場合があるので注意しましょう。

フォントの使用方法

基本的に商用利用OKですが中には要相談となっている物もあります。基本的にフリーフォントですが、投稿サイトな為か徹底されていません。実際は有料の物もあります。配布元で必ず利用規約を確認しましょう。

持ってると便利なフリーフォントの紹介

汎用性の高いフォントはGoogle FontsやAdobe Fontsにあるのですぐ見つかります。

ですが、ちょっと変わったフォントは種類が多くて選ぶのが大変かもしれません。

そこで、これは持っていたら便利っていうフォント(書体)をいくつか紹介していきます。

手書き風

手書きのフォントは意外と使いどころが多いので重宝します。個性的なものが多く、実際は使いどころに迷うものが多いです。

手書きの良さを残しつつ、実用性のあるものを集めました。

ふぉんときゅーとがーる。

画像:平仮名・片仮名が女子高生風(?)な可愛いフォント

学校の黒板に書いたような印象のフォントですが、クセが強すぎる事もなく使いやすいです。

フォントの種類

ゴシックに加え、最近は丸ゴシックが追加されました。お好みで使いわけてください。

  • 「JKゴシックL」フォント
  • 「JKゴシックM」フォント
  • 「JK丸ゴシック」フォント

リンク先:ふぉんときゅーとがーる。

マメロン

画像:デジタルデバイスで使用することを意識したフォント

主にデジタルデバイスで使用することを意識して制作されたフォントなのでとても読みやすいです。明朝体ともゴシック体とも違う丸形書体で、両方の良いとこ取りをした感じの印象です。

フォントの種類
  • マメロン Hi-Regular

フォントページのページ下側に「ダウンロード」ボタンがあります。Webフォントも使えます。

もじワク研究:マメロン

「mini-わくわく」フォント

画像:大人から子どもまで楽しめる、ちょっと手書き風のかわいいフォント

大人から子どもまで楽しめる、ちょっと手書き風のかわいいフォントです。漢字は使えませんが、太い丸ゴシック系のフォントと組み合わせる事と良いです。

フォントの種類
  • 「mini-わくわく」フォント

フォントページのページ内に「フリーダウンロード」ボタンがあります。

リンク先:「mini-わくわく」フォント

Yusei Magic

その名の通り、油性マジックで書いた様な印象のフォント。お店のポップやテレビ番組のカンペなどで見かける様な雰囲気です。

Google Fontsで利用可能なので無料です。フォントの全体像や、文字サイズを変えてプレビューできるのが便利ですね。

ウェブフォントよりもダウンロード向きです。

リンク先:Google Fonts

たぬき油性マジック

先ほどのたぬき油性マジックから派生した文字です。

「たぬき油性マジック」は普通紙に油性極太マジックで書いた手書き文字から作成した無料の日本語フォント。商用利用可能です。

Yusei Magicと同じく、お店のポップやテレビ番組のカンペなどでも見かける様な雰囲気です。

リンク先の画面下に大きな「Download」ボタンがあります。

リンク先:たぬきフォント

クレー

手書き感は少ないですが、機械的な硬さも少なく親しみ易さを感じます。まじめな説明や注釈を付ける時に使うと良いですね。

フォントの種類

文字の太さはレギュラーとセミボールドの2種類あるので用途に合わせて使い分け出来ますね。

  • KleeOne-Regular.ttf
  • KleeOne-SemiBold.ttf

各フォント名をクリックした先の右側に「Download」ボタンがあります。

リンク先:クレー

ゴシック・明朝

はんなり明朝

画像:築地体を参考にした、 やさしくてふんわりとしたひらがなとカタカナが特徴

ご存じの方も多いと思いますが、築地体を参考にした日本語フォントで商用利用可能です。

フォントの種類
  • はんなり明朝

フォントページのページ下側にOpenType形式 Downloadというリンクがあります。広告のダウンロードと間違えて押さない様に!

リンク先:はんなり明朝

Oswald

ECサイトの金額表記で見かける事が多いフォントです。英語表記なのですが金額表示に使うのがとても便利です。

ウェブサイトやバナー作成で活躍するので、ダウンロード用とウェブフォント用の両方用意しておきましょう。

ウェブフォントが不要ならアドビフォントでも使えます。

リンク先:Google Fonts

OLIVER

画像:OLIVER グラフィックやウェブで使えるサンセリフフォント
OLIVER グラフィックやウェブでも

サンセリフ体のシンプルで可読性の高いフォント。ウェイト(太さも)も3つあるので、用途に合わせて使い分ける事が出来ます。

癖がなくオシャレで、グラフィックとウェブデザインの両方に最適です。

ファッションやコスメといったジャンルで活躍しそうですね。

フォントの種類

3つのウェイト(ライト、レギュラー、ボールド)、

複数のファイル形式(OTF、TTF、EOT、SVG、WOFF、WOFF2)があります。

freebiesbug:OLIVER

マキナス 4 シリーズ

画像:無感情・無機質な印象のフォント

シャープやボールペンで字を丁寧に書こうとした際の直線的な部分が、無感情だったり無機質な表情となってデジタル化された様な書体です。

本文よりも、商品名などをカタカナ表記したり、近未来的な世界観と相性が良いです。

フォントの種類
  • マキナス 4 Flat

フォントページのページ下側に「ダウンロード」ボタンがあります。

もじワク研究:マキナス 4 Flat

ロンド B (スクエア)

画像:レトロな雰囲気と、未来的・モダンな感じが同居した印象のフォント

レトロな雰囲気と、未来的・モダンな感じが同居しているように感じられる廻想体を母体に、角を丸く、ひらかな・カタカナ・記号・英数字を新規収録したスピンオフ・フォント。

廻想体と同様にクセはありますが、非常に雰囲気のあるフォントです。実は記号や英数字も素敵です。

フォントの種類
  • ロンド B (スクエア)

フォントページのページ下側に「ダウンロード」ボタンがあります。

もじワク研究:ロンドB

まとめ

個性的なフォントは沢山あり、見ているだけでも楽しいのですが、実用性のあるものはごく僅かです。
汎用性のあるフォントはGoogle Fontsなどで探すのがおすすめ。

一方、個性的なフォントが欲しい時はページ後半で紹介したフォントをチェックしてみてくださいね。

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

画像:ポートフォリオの作り方 実績以外のアピール法

未経験Webデザイナーで実績無し – ポートフォリオサイトは必要?

画像:人気のあるブログネタの探し方

人気があるブログネタの探し方、初心者でもネタ切れなし!