サイトの魅力を最大化するには適切なツールを駆使する必要があります。お洒落なフォントもその一つです。
しかし、現在使用しているテーマには、お好きなウェブフォントが組み込まれていないかもしれません。もしくは、テーマの既存のフォントでは満足できないということもあるかもしれません。
そこで、自分好みのフォントをインストールする方法を理解することが大変重要です。今回は、今おすすめのフォントについてご紹介しますが…まずは技術的なお話にも触れたいと思います。
今時でお洒落なフォントの要素とは？
見た目を意識したフォントは新しいものではありません。そのスタイルはもともと18世紀に確立したものです。それにも関わらず、現代でも重要な役割を果たしており、実際にあらゆるところで使われています。
では、今時のフォントとは一体どのようなものなのでしょうか？
シャープで、クリーンで、大胆で、プロフェッショナルで、スタイリッシュ…といったところでしょうか。また、サンセリフ体（文字の端につく飾り、セリフのない書体）である傾向があり、筆記体フォントのカテゴリに入るものもあります。デザインに特徴があるため、見出しやロゴでよく使われます。存在感があるものの、押しが強いわけではありません。ちゃんと特徴があり、注意を引くものです。
お洒落なフォントを使用したポートフォリオサイトの一例もご覧下さい。
ご覧のように凝縮されていて幅が狭いのが特徴的です。
これは、あくまでも全体的な傾向の話です。タイポグラフィーのデザインは日々進化しており、より崩したものも存在します。とはいえ、これで現代におけるフォントの流行について、おおよそのイメージ（そしてそれを使うメリット）をつかんでいただけたはずです。
ダウンロードしたフォントをWordPressサイトにアップロードする方法
外部サイトでダウンロードしたフォントはGoogleフォントのようなオンラインサービスとは違い、ただインポートすればよいというわけではないので、少し手間がかかります。手動でフォントをアップロードするかプラグインを使用する必要があります。
ただし、アップロードをする前に、フォントがウェブに対応しているかどうかを確認する必要があります。実は、全てのフォントが元からwebセーフまたは全てのウェブブラウザとの互換性があるとは限りません。
とは言え、それほど面倒なことではありません。無料のウェブフォントジェネレーターツールを使用して、ネット上で見つけたフォントを全てのウェブブラウザで使用、閲覧できるように変換するだけでOKです。
この手順を踏むことは、フォントの読み込みスピードを最適化する上でも大変重要です。しかしやるべきことはそれだけではありません。フォントがリソースを使いすぎてしまったり、不必要にサイトの読み込みスピードを遅くしてしまったりしないための対策が他にもいくつかあります。
- パフォーマンスを確認する：GTmetrixを使って、HTTPリクエストの件数を確認しましょう。件数が多い場合、サイトが想像以上に多くのフォントを利用している可能性があります。ここで言っているのはプラグインやテーマと一緒に自動でインストールされたフォントのことです（手動で追加したもののことではありません）。
- アナリティクスを確認する：これにより、どのフォント形式がサイトで最もアクセスされているかを確認できます。最も一般的なのはEOT、TTF、WOFF、WOFF2です。どの形式をサポートするかを検討する際に、優先順位をつけやすくなるでしょう。
- フォントをブラウザ側でキャッシュできるようにする：フォントは毎日のように変更したりはしないでしょう。そのため、頻繁にサイトに訪れる訪問者のブラウザでは、問題なくキャッシュを活用できます。そうすることでHTTPリクエストの件数を低減することができます。
手動でフォントをアップロードするには少しだけ技術的なスキルが必要ですが、多くの方にとっては決して不可能なことではないはず。
- お好きなフォントをダウンロードします（これについては、この後たくさん例をご紹介します）。
- サイトのバックアップをとり（全てのコンテンツとデータベースを含め）、これから加える変更のために子テーマを作成します。
- wp-content/themes/your-theme-name/fontsのフォルダにフォントファイルを.zip形式でアップロードします。「fonts」というフォルダが存在しない場合、新たに作成し、そこにフォントのzipファイルをアップロードします。この作業を行う際はお好きなFTPクライアントソフトをご利用ください。
- WordPress管理画面から「外観」>「テーマの編集」を開き、cssファイルにアクセスします。このファイルには、カスタムコードが必要です。適切なフォントファミリーとURLをコードに貼り付けて、「ファイルを更新」をクリックします。
@font-face {
font-family: YOUR FONT NAME;
src: url(http://sitename.com/wp-content/themes/themename/fonts/font-name.ttf);
font-weight: normal;
}上記のコードによりフォントがサイトに追加されます。次に、WordPressサイトのどの要素にフォントを適用するか指定します。そのために、再びstyle.cssを開き、次のコードを記述します。
.SITE ELEMENT {
font-family: "FONT NAME", Helvetica, sans-serif;
}上のコードでは、サイトのどの要素にフォントを適用するか、そして適用するフォント名を指定しています。
このような手動でのアップロードが面倒だという方は、プラグインを使用してWordPressにフォントを追加することもできます。おすすめのプラグインの一つはUse Any Fontです。名前からも分かるように、あらゆるフォントをサイトにアップロードしCSSの要素に割り当てることができます。
2024年に使用したいおすすめのお洒落フォント56選
カスタムフォントをアップロードする方法、最適化する方法が分かったところで、次はおすすめのお洒落なフォントをご紹介していきます。
1. Intro
Intro は大胆な線で、見出しやタイトルに使いやすい、基本的なデザインのフォントです。このフォントファミリーには太いものから細いまで8種類の太さが選べる72個のフォントあり、非常に柔軟に利用できます。
2. Komoda
もう一つのおすすめはKomodaです。こちらのフォントはぎゅっと埋め込まれたバランスで、とても変わった見た目です。全て大文字のサンセリフ体で、文字の中央が高めに設定されています。また合字がとても特徴的で、ロゴにぴったりなフォントです。
3. Stoked
Stoked もまた見出しやロゴをユニークにしてくれる全て大文字のフォントです。読みやすさと面白さを兼ね備えています。特徴的なのは各文字の二重になった部分とステンシルで描いたように見える途切れた線です。
4. Classy Marisa
Classy Marisaもおすすめです。華奢で上品なロゴや見出しが作れる優美で流れるようなフォントです。どんなテキストも特徴的にしてくれるとても面白い合字や装飾が施されています。
5. Canter
Canterも素晴らしいフォントです。こちらは全て大文字で文字間隔の狭いサンセリフ体のフォントです。3D、人目を引くドロップシャドウを含め、6つの太さから選ぶことができます。
6. Lucky
Luckyも是非検討したいモダンフォントです。こちらもロゴや見出しに最適なサンセリフ体のフォントです。雑誌やオンラインメディアに最適なエディトリアルデザイン向きのフォントです。
7. Zafir
Zafirもまた注目のフォントの一つです。ミニマリストデザインが特徴で、こちらもまた全て大文字です。ロゴやタイトルにぴったり。全体的に変わったデザインをした、カーブした線が特徴のセリフ体です。
8. Coves
Covesも選択肢に加えたいフォントの一つ。ライトとボールドの2つの太さから選ぶことができる上品で美しいフォントです。通常の本文やタイトル、ヘッダーにも使え非常に多目的です。
9. Azonix
Azonixもまた斬新な特徴を持つお洒落なフォント。幾何学的な見た目が強調されたサンセリフ体です。SF映画のタイトルバックで使えそうな、全て大文字の見やすい文字です。
10. Arkhip
Arkhipは過去の時代を思い起こさせつつもモダンさも持ち合わせたデザインの無料フォントです。ロシア語（キリル文字）の要素を使うことで、斬新なフォントを作り上げています。
11. Prime
Primeというフォントもおすすめです。太い線と未来的な見た目が特徴のお洒落なサンセリフのフォントです。幾何学的な角のフォントで、近未来や技術がテーマのサイトにぴったりです。
12. Glober
Globerも是非検討したいお洒落なフォント。このフォントファミリーでは、18の太さがさらに9つの立体活字と9つのイタリック体に分かれています。読みやすいサンセリフ体で、タイトルや本文テキストなど、様々な場面で使いやすいフォントです。
13. MADE Gentle
MADE Gentleも特徴的でお勧めのフォントです。丸みのあるセリフ体で、Cooper Blackフォントにインスパイアされたデザイン。1970年代の本の表紙や看板を思わせるような、太字で丸みを帯びたレトロなフォントです。
14. Nordic
Nordicはモダンでありながらクラシックな雰囲気も併せ持つフォントで、2種類の書体と3種類の太さから選べます。デザインはノルウェーのルーン文字からインスピレーションを受けたもので、タイトルや見出し、ロゴにぴったりです。
15. Maddac
Maddacはサイトをスタイリッシュにしてくれる太くてがっしりとしているサンセリフのフォントです。デザインはモダンで、独特な造形です。それぞれの文字のどこかしらに若干の角や傾斜がつくことでデザイン性が増しています。
16. Croc
Crocはご覧の通りとても素敵なフォントです。昔懐かしくありつつも新しさも感じさせる、太字のセリフの書体です。
17. Aqua
Aquaも是非一度検討したいフォントです。アールヌーボー様式を感じさせながら、時代を超えたデザイン。大胆でありながらシンプルで、他のフォントと一味違う装飾や合字が特徴です。
18. Manifesto
Manifestoで大胆に。イタリア合理主義からインスピレーションを受けているエディトリアルデザイン向けのフォントです。見出しやロゴ、タイトル、印刷物にもウェブデザインにも使えて、非常に多用途です。
19. Orkney
Orkneyはプロフェッショナルな雰囲気の可愛らしいフォントです。幾何学的なデザインの書体で、様々な目的で利用できます。タイトルやロゴ、通常のテキストにも最適です。また、印刷物にもデジタルメディアにもぴったりです。その使い道は無限にあります。
20. Elppa
Elppaは魅力的で多面的、斬新なデザインのフォントです。書体はミニマリストでありながら、宇宙的な雰囲気を持ちます。印刷物やウェブデザインに是非ご利用ください。本文には不向きかもしれませんが、ロゴやタイトル、そしてグラフィックなどにはぴったりです。
21. Corn
Corn は角が丸く、農場のような雰囲気の面白いフォントです。14種類のスタイルから選ぶことができ、タイトルや見出しロゴなどにそのまま使えます。中には本文にも使えそうなスタイルもあります。このフォントだけでサイト全体のデザインを完成させることさえできるでしょう。
22. Koliko
他にも、一目で興味を引き、様々な用途に利用できるとても楽しい雰囲気のフォントKolikoがあります。それぞれ完璧な形状と機能を併せ持つ3つのスタイルから選べます。
23. Quirk
Quirkはその名の通り、奇抜な見た目のフォントです。ぴったりなネーミングですね。面白い合字と文字同士が積み重なる部分が特徴の大文字のみのフォントです。
24. Le French
Le Frenchはレトロなフランスのカフェのような雰囲気がお好きな方に特におすすめの洗練されたフォントです。メニューや食品関連のウェブサイトにはぴったりです。タイトルや見出し、ロゴ、本文にも使えます。
25. Munich
Munichはロゴやタイトルのグラフィックにぴったりの美しいサンセリフのフォントです。堂々としていて印象的ですが、威圧感はありません。
26. Northwest
Northwestはレトロな雰囲気を持つお洒落なフォントです。キャンペーンロゴやアウトドア雑誌のタイトルロゴなどを思い起こさせます。角張ったセリフ体に装飾が施されたこのフォントは、様々なアウトドア関連のコンテンツにぴったりです。
27. Modeka
Modekaiは角のはっきりした、お洒落で非常にかっこいいフォントです。様々なシーンで使えます。各文字に加えられた余分な角が独特なスタイルを作り出します。
28. Disclaimer
Disclaimerは様々な目的に最適な、文字の幅が狭く、大胆なフォントです。非常に凝縮されたデザインにより堂々として立派な印象を与えます。見出しやタイトルにぴったりです。
29. 5th Avenue
5th Avenueはファンタジー感があり、公式ロゴやブランディングにぴったりなクラシックな雰囲気も持つフォントです。たくさんの代替となる文字により高いデザイン性と魅力を演出できる大胆なセリフフォントです。
30. Quakiez
Quakiezもまた、セリフ体のフォントです。高級な雰囲気を重視したデザインですが、ミニマルな要素も併せ持っています。2つのスタイルから選べ、ロゴやタイトル見出しなどに最適です。
31. Modern Outdoor
他にも、キャンプやアウトドアを思い起こさせるModern Outdoorがおすすめです。こちらはタイトル、見出し、ロゴにぴったりで、ポスターで使えば強烈な印象を与えられること間違いなしです。注目を集めることができ、大文字のみの書体がアウトドアの雰囲気を強調します。
32. Hyperbola
Hyperbolaは丸みを帯びた斬新なフォントです。いい意味で現実離れした雰囲気を持ちます。各所は丸みを帯びていますが全体としては四角い形状をしているのが特徴です。
33. Boxing
Boxingは四角くすっきりとした、ヘッダーやタイトル、ロゴに最適なフォントです。大文字のみのフォントで、細長く、面白い見た目です。そして何より、様々な用途で使用できるのがいいところです。
34. Sonder
Sonderもまた非常に多面的なフォントです。スラブセリフとサンセリフから選べます。複数の太さと、レギュラーかラフの2通りからも選択できます。ラフの書体には空白が入り、素朴でナチュラルな印象を与えます。
35. Lombok
Lombokは非常に上品な細い書体です。幾何学的な要素が非常にユニークで特徴的なサンセリフのフォントです。見出し、ロゴ、タイトルにぴったり。
36. Distrito
Distritoはとても特徴的なスタイルの全て大文字のフォントです。全ての文字に若干傾斜がついており、ロゴや見出しにぴったりなユニークなデザインとなっています。コロンビア、ボゴタ歴史地区からインスピレーションを受けた全て大文字のフォントです。
37. Ailerons
Aileronsは異星の標識に使われていそうなフォント。独特な美的感性が漂っています。全て大文字のサンセリフ体で、どこに使っても印象的ですが、特にタイトルや見出しにはぴったりです。
38. Ethna
Ethnaはクラシックな見た目とお洒落なスタイルを併せ持ったフォントです。ビンテージとモダンのデザイン要素を組み合わせることにより全く新しいスタイルを確立している、ヒューマニストスタイルからインスピレーションを得たサンセリフ体フォントです。こちらのフォントはどんな用途にもぴったりです。
39. Noelle
Noelleはポジティブな第一印象を与えられること間違いなしの幾何学的なセリフ体です。ミニマルなデザインで、どのような業界のタイトルや見出しにも最適です。多少ビンテージの要素も持っていますが、新しさも感じさせます。オンラインにも印刷にもぴったりです。また、おまけでスクリプト書体もついてきます。
40. Sequel
Sequelはロゴや見出しにぴったりの丸みを帯びたフォントです。合字を豊富に使っているため、デザイン性の高い魅力的な印象を与えることができます。大胆でありながら、押し付けがましくはありません。
41. Higher
Higherもまたクラシックな見た目の洗練されたフォントです。非常に凝縮された訴求力の高い全て大文字のフォントで、どんな文字でも印象的にしてくれます。
42. Nano
Nanoは斬新なデザインのサンセリフ体です。全て小文字なので、今回ご紹介するフォントの中でも特徴的なフォントといえます。文字のデザイン自体が非常に特徴的でお洒落なので、ロゴやブランディング用の素材として最適です。短い文章にはぴったりですが、長い文章になると少し読みにくいかもしれません。
43. Jollin
Jollinは全体的に分厚く、いくつかの文字の先端がカールしたお洒落なフォントです。こちらのフォントはレギュラー書体とイタリック体から選ぶことができ、たくさんの代替となる文字も選べるので、気分に合わせてシンプルにしたり、装飾的にしたりすることができます。
44. Phenomena
Phenomenaは幅が狭く、がっしりとしていて、角が丸みを帯びたフォントです。目を引くフォントなので、タイトルやロゴ、見出しに最適です。細いものから太いものまで、7種類のスタイルが選べるので、通常のテキストで利用しやすいでしょう。
45. Calibre
Calibreはコンテンツの中で良い意味で高さを際立たせることのできる非常に凝縮されたフォントです。全て大文字のフォントで、数字や記号、ヨーロッパに特有の文字も入力できます。
46. Sundays
Sundaysは非常に現代的でありながら、どこかクラシックな雰囲気も併せ持つセリフ体のフォントです。他の古典的な似たようなフォントよりも細く、カーブしており、雑誌の見出しやタイトル、サイトのロゴや見出しなどに最適なデザインです。
47. Cornerstone
Cornerstoneは、キューブ状のスタイルを持つがっしりしたフォントです。ロゴから見出しまで様々な用途で使えます。
48. One Day
One Dayは途切れた線がユニークな厚みのないフォントです。こちらも全て小文字のフォントで軽くて薄いデザインが特徴です。数字と記号も使用でき、あまりがっしりとした印象を与えることなく、幾何学的な雰囲気を演出できます。
49. Kollektif
Kollektifは幅広い用途で使えるクラシックなフォントです。幾何学的なデザインで2つの太さから選べます。印刷物にもウェブでの利用にも最適です。
50. Nostalgia
次にご紹介するのは、まるで何十年も前に作成されたかのようなレトロな雰囲気を持つお洒落なフォント、Nostalgiaです。3つの書体から選べ、記号、合字、花の絵文字も入力できます。ロゴ、タイトル、ポスター、または招待状に最適です。
51. Elixia
Elixiaは錬金術の世界観を彷彿とさせる幾何学的フォントです。全ての文字に加えられた余分な角がユニークなスタイルを作り出しています。
52. Salmon
他にもSalmonがおすすめです。太くてミニマルなサンセリフ体のフォントです。タイトルやロゴ、見出しに最適。全て大文字のフォントで、塗りつぶしと枠線の2つから選べ、一緒に使ってもよく合います。
53. Thinoo
Thinooもサンセリフ体のフォントです。細い書体と太い書体から選べ、数字、記号、句読点などあらゆる文字が含まれています。プロフェッショナルですっきりとした印象のフォントです。シンプルでありながら人目を引きます。あらゆるタイプのサイトや印刷物にぴったりです。
54. Summer Loving
他にも、複数の書体が選べてこのフォントだけであらゆるデザインができてしまう、とても楽しげなモダンフォントであるSummer Lovingもおすすめです。サンセリフ体のフォントと、プロジェクトをあっという間に彩ってくれる絵の具で描いたようなデザインも選べます。合字と代替の文字も含まれています。
55. Silverfake
Silverfakeはタイトルやロゴ、見出し、印刷物にぴったりな文字間隔の広いセリフ体のフォントです。例えば、Tシャツのロゴなどに最適です。
56. Vienna
最後にご紹介するのはViennaです。雑誌の表紙に使われるようなクラシックなフォントの魅力をそのままに、現代の美しさの基準に合わせて修正を加えたセリフ体のフォントです。ミニマルなデザインで、大文字、数字、句読点が含まれます。
まとめ
ブランディングによりマッチするフォントを選びたい、コンテンツを全てのブラウザでより読みやすくしたいなど、サイトにカスタムフォントを使う理由は、人によって様々でしょう。いずれにせよ、好みのお洒落なフォントをアップロードするのはとてもメリットの大きいことです。
一方で、その手順は一見面倒に思えるかもしれません。フォントを探し、ダウンロードし「.zip」形式に変換し、FTPクライアントソフトから正しいディレクトリにアップロードしなければなりません。さらに、コードスニペットをテーマのCSSファイルの適切な部分に貼り付けなければなりません。この作業は手動で行うことも、プラグインを利用して行うこともできます（または開発者を雇用する方法も考えられます）。
どの方法を選んだとしても、最終的にはサイトがより個性的でスタイリッシュになることは間違いないでしょう。今回ご紹介した56個のフォントの中からあなたのサイトにぴったりなものが見つかれば幸いです。太字のもの、華奢なもの、丸みを帯びたもの、荒々しいもの、装飾的なもの、質素なもの、どのようなフォントを選んでも、きっとサイトがより魅力的なものになるでしょう！
（こちらもあわせてお読みください：WordPresで固定ページと投稿のタイトルを非表示にする方法）
コメントを残す