Webフォントは自分のWebサーバーにダウンロードしなくても使えるように、共有公開されたフォントです。
例えばGoogle Fontsがある。利点は共有のフォントだと閲覧者がどのサイトを訪れようとも一回しかダウンロードしなくて済むので、各サイトで無駄な通信が解消されます。
欠点はいまいちライセンスがわからないことと、いつなんどき使えなくなるかわからないことです。
当サイトでも使用している再配布可能なフォントOradano明朝GSRRを例に使って実際に表示してみましょう。
することは簡単、あなたのサイトのWebフォントを反映させたいページで読み込んでいるCSSに下記を追加します。
1でフォントのあるURLを指定。例では当サイトにあるOradano明朝GSRR用のCSSを読み込んでいます。
2～4はお馴染みですね。例はp要素に反映するための記述です。
CSS上で追加する位置は最後の方がおすすめ。CSSでは後の記述が優先されるので、例の宣言ブロックが一番最後に読み込まれた方が追加という観点で威力を発揮します。
1の@で始まるアットルールは他のアットルールとまとめて上の方に書いた方が見栄えが良いかもしれません。font-familyが入った宣言ブロックより上であれば良く、好みです。
当サイトでは、Webサイトで利用できる無料の日本語Webフォントを随時追加・公開しています。 個性的なデザインのフォントをCSSで読み込むことで、見出しやタイトルなどを手軽に装飾できます。
フォント作者の方からのご連絡も大歓迎です。 掲載をご希望のフリーWebフォントがありましたら、お気軽にお知らせください。
各フォントの利用条件・ライセンスは、それぞれの作者が定めています。 Webサイトでの利用が可能なフォントを掲載していますが、 商用利用や再配布などの詳しい条件については、必ず各作者のサイトをご確認ください。
CSSを使用するときは、下記の赤色のフォント名と 青色のファイル名を、それぞれ実際に使用するものへ置き換えてください。
それぞれの日本語Webフォントは、本文全体に使用するだけでなく、 Webサイトの見出し・ロゴ・タイトル・キャッチコピーなどに 部分的に使用すると、デザインのアクセントとしても効果的です。
Webフォント見本一覧
実際のフォントをブラウザ上で確認できます。
フォントデータを多数読み込むため、50MB強のデータ通信が発生します。
通信量が限られている場合はご注意ください。
Webフォント画像見本一覧
画像でフォントを確認できる軽量版です。
通信量を抑えたい場合はこちらがおすすめです。
ここでは、上で紹介した無料の日本語Webフォントについて、 それぞれの特徴やおすすめの用途を紹介します。 Webサイトの見出しやタイトル、ロゴ、キャッチコピーなど、 フォントを変えるだけでサイトの雰囲気を大きく変えることができます。
昔の活字や活版印刷を思わせる、和風でレトロな雰囲気の明朝体です。 一般的な明朝体よりも古い印刷物のような味わいがあり、 文学作品や歴史・文化を扱うサイト、和風デザインなどによく合います。
太くてざっくりとした手書き感のある、ポップで親しみやすいフォントです。 子ども向けサイト、イベントページ、店舗サイト、ブログなど、 堅苦しくない雰囲気を作りたいときにおすすめです。
電機文字をイメージした、太く角ばったデザインが特徴のフォントです。 直線的で存在感があるため、Webサイトのタイトルや見出し、 ゲーム、テクノロジー系のデザインなどに向いています。
ラフで自然な手書き感を楽しめる個性的な日本語フォントです。 整いすぎていない文字が、手作り感や親しみやすさを演出します。 日本語以外にも多くの文字に対応しているため、多言語サイトにも利用しやすいフォントです。
手書き文字をベースに、傾きや角ばったデザインを加えた個性的なフォントです。 手書きの柔らかさとデザイン性を両立しており、 カジュアルなタイトルやキャッチコピー、創作系サイトなどにおすすめです。
昔の看板や電機製品のロゴを思わせる、レトロな雰囲気のデザインフォントです。 文字そのものに存在感があるため、ロゴやタイトル、バナーなど、 少し懐かしい印象を出したい場所に向いています。
力の抜けたような、ゆるくラフな手書き感が特徴のデザインフォントです。 SNS風のデザインや漫画、動画のテロップ、コメント風の表示など、 親しみやすくカジュアルな雰囲気を作りたいときに適しています。
手書きの勢いや力強さを感じさせるデザインフォントです。 動画のテロップなどでツッコミを入れる用途をイメージして作られており、 漫画風の演出やSNS、動画風のタイトル、インパクトのある見出しなどにおすすめです。
AとBの2種類があり、ひらがな・カタカナの字形が異なります。 同じ文章でもAとBを使い分けることで、少し違った印象を作ることができます。
ロゴやタイトルなど、短い文字を大きく見せる用途に向いた個性的なデザインフォントです。 ひらがな・カタカナ・アルファベットを使うことができ、 一般的な本文用フォントとは違った強い存在感があります。 Webサイトのロゴ、キャッチコピー、ゲームや創作作品のタイトルなどにおすすめです。
日本語Webフォントは、すべての文章に使用する必要はありません。 本文には読みやすい標準的なフォントを使用し、 見出しやタイトルだけデザイン性の高いフォントに変更する方法もおすすめです。
2022/3/7 おーすけ