WordPressサイトの魅力を最大化するには適切なツールを駆使する必要があります。お洒落なフォントもその一つです。

しかし、ご利用中のWordPressテーマには使いたいフォントが含まれていないかもしれません。もしくは、テーマの既存のフォントでは満足できないということもあるかもしれません。

そこで、自分好みのフォントをインストールする方法を理解することが大変重要です。今回は、今おすすめのフォントについてご紹介しますが…まずは技術的なお話にも触れたいと思います。

今時でお洒落なフォントの要素とは?

見た目を意識したフォントは新しいものではありません。そのスタイルはもともと18世紀に確立したものです。それにも関わらず、現代でも重要な役割を果たしており、実際にあらゆるところで使われています。

では、今時のフォントとは一体どのようなものなのでしょうか?

シャープで、クリーンで、大胆で、プロフェッショナルで、スタイリッシュ…といったところでしょうか。サンセリフであることが多いのも特徴です(ただし必ずしもそうとは限りません)。デザインに特徴があるため、見出しやロゴでよく使われます。存在感があるものの、押しが強いわけではありません。ちゃんと特徴があり、注意を引くものです。

お洒落なフォントを使用したポートフォリオサイト一例もご覧下さい。

ご覧のように凝縮されていて幅が狭いのが特徴的です。

chris wilhite

chriswilhitedesign.comこれは、あくまでも全体的な傾向の話です。タイポグラフィーのデザインは日々進化しており、より崩したものも存在します。とはいえ、これで現代におけるフォントの流行について、おおよそのイメージ(そしてそれを使うメリット)をつかんでいただけたはずです。

Get fancy with your ✨ fonts ✨ thanks to this list of 50+ modern options ⬇️Click to Tweet

ダウンロードしたフォントをWordPressサイトにアップロードする方法

外部サイトでダウンロードしたフォントはGoogleフォントのようなオンラインサービスとは違い、ただインポートすればよいというわけではないので、少し手間がかかります。手動でフォントをアップロードするかプラグインを使用する必要があります。

ただし、アップロードをする前に、フォントがウェブに対応しているかどうかを確認する必要があります。実は、全てのフォントが元からwebセーフまたは全てのウェブブラウザとの互換性があるとは限りません。

とは言え、それほど面倒なことではありません。無料のウェブフォントジェネレーターツールを使用して、ネット上で見つけたフォントを全てのウェブブラウザで使用、閲覧できるように変換するだけでOKです。

あらゆるフォントをwebセーフなフォントに変換

あらゆるフォントをwebセーフなフォントに変換

この手順を踏むことは、フォントの読み込みスピードを最適化する上でも大変重要です。しかしやるべきことはそれだけではありません。フォントがリソースを使いすぎてしまったり、不必要にサイトの読み込みスピードを遅くしてしまったりしないための対策が他にもいくつかあります。

手動でフォントをアップロードするには少しだけ技術的なスキルが必要ですが、多くの方にとっては決して不可能なことではないはず。

  1. お好きなフォントをダウンロードします(これについては、この後たくさん例をご紹介します)。
  2. サイトのバックアップをとり(全てのコンテンツとデータベースを含め)、これから加える変更のために子テーマを作成します。
  3. wp-content/themes/your-theme-name/fontsのフォルダにフォントファイルを.zip形式でアップロードします。「fonts」というフォルダが存在しない場合、新たに作成し、そこにフォントのzipファイルをアップロードします。この作業を行う際はお好きなFTPクライアントソフトをご利用ください。
  4. WordPress管理画面から「外観」>「テーマの編集」を開き、cssファイルにアクセスします。このファイルに以下のコードを追加します。そして、「ファイルを更新」をクリックします。
@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の要素に割り当てることができます。

2020年に使用したいおすすめのお洒落フォント56選

WordPressにカスタムフォントをアップロードする方法、最適化する方法が分かったところで、次はおすすめのお洒落なフォントをご紹介していきます。

1. Intro

Modern fonts: intro

Intro

Intro は大胆な線で、見出しやタイトルに使いやすい、基本的なデザインのフォントです。このフォントファミリーには太いものから細いまで8種類の太さが選べる72個のフォントあり、非常に柔軟に利用できます。

2. Komoda

Modern fonts: komoda

Komoda

もう一つのおすすめはKomodaです。こちらのフォントはぎゅっと埋め込まれたバランスで、とても変わった見た目です。全て大文字のサンセリフ体で、文字の中央が高めに設定されています。また合字がとても特徴的で、ロゴにぴったりなフォントです。

3. Stoked

Modern fonts: stoked

Stoked

Stoked もまた見出しやロゴをユニークにしてくれる全て大文字のフォントです。読みやすさと面白さを兼ね備えています。特徴的なのは各文字の二重になった部分とステンシルで描いたように見える途切れた線です。

4. Classy Marisa

classy marisa

Marisa

Classy Marisaもおすすめです。華奢で上品なロゴや見出しが作れる優美で流れるようなフォントです。どんなテキストも特徴的にしてくれるとても面白い合字や装飾が施されています。

5. Canter

canter

Canter

Canterも素晴らしいフォントです。こちらは全て大文字で文字間隔の狭いサンセリフ体のフォントです。3D、人目を引くドロップシャドウを含め、6つの太さから選ぶことができます。

6. Lucky

lucky

Lucky

Luckyも是非検討したいモダンフォントです。こちらもロゴや見出しに最適なサンセリフ体のフォントです。雑誌オンラインメディアに最適なエディトリアルデザイン向きのフォントです。

7. Zafir

Modern fonts: zafir

Zafir

Zafirもまた注目のフォントの一つです。ミニマリストデザインが特徴で、こちらもまた全て大文字です。ロゴやタイトルにぴったり。全体的に変わったデザインをした、カーブした線が特徴のセリフ体です。

8. Coves

coves

Coves

Covesも選択肢に加えたいフォントの一つ。ライトとボールドの2つの太さから選ぶことができる上品で美しいフォントです。通常の本文やタイトル、ヘッダーにも使え非常に多目的です。

9. Azonix

azonix

Azonix

Azonixもまた斬新な特徴を持つお洒落なフォント。幾何学的な見た目が強調されたサンセリフ体です。SF映画のタイトルバックで使えそうな、全て大文字の見やすい文字です。

10. Arkhip

arkhip

Arkhip

Arkhipは過去の時代を思い起こさせつつもモダンさも持ち合わせたデザインの無料フォントです。ロシア語(キリル文字)の要素を使うことで、斬新なフォントを作り上げています。

11. Prime

Modern fonts: prime

Prime

Primeというフォントもおすすめです。太い線と未来的な見た目が特徴のお洒落なサンセリフのフォントです。幾何学的な角のフォントで、近未来や技術がテーマのサイトにぴったりです。

12. Glober

glober

Glober

Globerも是非検討したいお洒落なフォント。このフォントファミリーでは、18の太さがさらに9つの立体活字と9つのイタリック体に分かれています。読みやすいサンセリフ体で、タイトルや本文テキストなど、様々な場面で使いやすいフォントです。

13. MADE Gentle

made gentle

MADE Gentle

MADE Gentleもお洒落なフォントです。ソフトなセリフ体に分類され、Cooper Blackのフォントからインスピレーションを受けています。こちらは太字ですが、丸みを帯びていて、1970年代の古い書籍の表紙や看板を思い起こさせます。

14. Nordic

nordic

Nordic

Nordicはモダンでありながらクラシックな雰囲気も併せ持つフォントで、2種類の書体と3種類の太さから選べます。デザインはノルウェーのルーン文字からインスピレーションを受けたもので、タイトルや見出し、ロゴにぴったりです。

15. Maddac

Modern fonts: maddac

Maddac

Maddacサイトをスタイリッシュにしてくれる太くてがっしりとしているサンセリフのフォントです。デザインはモダンで、独特な造形です。それぞれの文字のどこかしらに若干の角や傾斜がつくことでデザイン性が増しています。

16. Croc

croc

Croc

Crocはご覧の通りとても素敵なフォントです。昔懐かしくありつつも新しさも感じさせる、太字のセリフの書体です。

17. Aqua

Modern fonts: aqua

Aqua

Aquaも是非一度検討したいフォントです。アールヌーボー様式を感じさせながら、時代を超えたデザイン。大胆でありながらシンプルで、他のフォントと一味違う装飾や合字が特徴です。

18. Manifesto

manifesto

Manifesto

Manifestoで大胆に。イタリア合理主義からインスピレーションを受けているエディトリアルデザイン向けのフォントです。見出しやロゴ、タイトル、印刷物にもウェブデザインにも使えて、非常に多用途です。

19. Orkney

orkney

Orkney

Orkneyはプロフェッショナルな雰囲気の可愛らしいフォントです。幾何学的なデザインの書体で、様々な目的で利用できます。タイトルやロゴ、通常のテキストにも最適です。また、印刷物にもデジタルメディアにもぴったりです。その使い道は無限にあります。

20. Elppa

elppa

Elppa

Elppaは魅力的で多面的、斬新なデザインのフォントです。書体はミニマリストでありながら、宇宙的な雰囲気を持ちます。印刷物やウェブデザインに是非ご利用ください。本文には不向きかもしれませんが、ロゴやタイトル、そしてグラフィックなどにはぴったりです。

21. Corn

corn

Corn

Corn は角が丸く、農場のような雰囲気の面白いフォントです。14種類のスタイルから選ぶことができ、タイトルや見出しロゴなどにそのまま使えます。中には本文にも使えそうなスタイルもあります。このフォントだけでサイト全体のデザインを完成させることさえできるでしょう。

22. Koliko

koliko

Koliko

他にも、一目で興味を引き、様々な用途に利用できるとても楽しい雰囲気のフォントKolikoがあります。それぞれ完璧な形状と機能を併せ持つ3つのスタイルから選べます。

23. Quirk

Modern fonts: quirk

Quirk

Quirkはその名の通り、奇抜な見た目のフォントです。ぴったりなネーミングですね。面白い合字と文字同士が積み重なる部分が特徴の大文字のみのフォントです。

24. Le French

le french

Le French

Le Frenchはレトロなフランスのカフェのような雰囲気がお好きな方に特におすすめの洗練されたフォントです。メニューや食品関連のウェブサイトにはぴったりです。タイトルや見出し、ロゴ、本文にも使えます。

25. Munich

munich

Munich

Munichはロゴやタイトルのグラフィックにぴったりの美しいサンセリフのフォントです。堂々としていて印象的ですが、威圧感はありません。

26. Northwest

northwest

Northwest

Northwestはレトロな雰囲気を持つお洒落なフォントです。キャンペーンロゴやアウトドア雑誌のタイトルロゴなどを思い起こさせます。角張ったセリフ体に装飾が施されたこのフォントは、様々なアウトドア関連のコンテンツにぴったりです。

27. Modeka

modeka

Modeka

Modekaiは角のはっきりした、お洒落で非常にかっこいいフォントです。様々なシーンで使えます。各文字に加えられた余分な角が独特なスタイルを作り出します。

28. Disclaimer

disclaimer

Disclaimer

Disclaimerは様々な目的に最適な、文字の幅が狭く、大胆なフォントです。非常に凝縮されたデザインにより堂々として立派な印象を与えます。見出しやタイトルにぴったりです。

29. 5th Avenue

5th avenue

5th Avenue

5th Avenueはファンタジー感があり、公式ロゴやブランディングにぴったりなクラシックな雰囲気も持つフォントです。たくさんの代替となる文字により高いデザイン性と魅力を演出できる大胆なセリフフォントです。

30. Quakiez

Modern fonts: quakiez

Quakiez

Quakiezもまた、セリフ体のフォントです。高級な雰囲気を重視したデザインですが、ミニマルな要素も併せ持っています。2つのスタイルから選べ、ロゴやタイトル見出しなどに最適です。

31. Modern Outdoor

modern outdoor

Modern Outdoor

他にも、キャンプやアウトドアを思い起こさせるModern Outdoorがおすすめです。こちらはタイトル、見出し、ロゴにぴったりで、ポスターで使えば強烈な印象を与えられること間違いなしです。注目を集めることができ、大文字のみの書体がアウトドアの雰囲気を強調します。

32. Hyperbola

Modern fonts: Hyperbola

Hyperbolaは丸みを帯びた斬新なフォントです。いい意味で現実離れした雰囲気を持ちます。各所は丸みを帯びていますが全体としては四角い形状をしているのが特徴です。

33. Boxing

boxing

Boxing

Boxingは四角くすっきりとした、ヘッダーやタイトル、ロゴに最適なフォントです。大文字のみのフォントで、細長く、面白い見た目です。そして何より、様々な用途で使用できるのがいいところです。

34. Sonder

sonder

Sonder

Sonderもまた非常に多面的なフォントです。スラブセリフとサンセリフから選べます。複数の太さと、レギュラーかラフの2通りからも選択できます。ラフの書体には空白が入り、素朴でナチュラルな印象を与えます。

35. Lombok

lombok

Lombok

Lombokは非常に上品な細い書体です。幾何学的な要素が非常にユニークで特徴的なサンセリフのフォントです。見出し、ロゴ、タイトルにぴったり。

遅いホストにはうんざりですか? Kinstaは速度とパフォーマンスを念頭に置いて構築されています ホスティングプランをご確認ください。

36. Distrito

distrito

Distrito

Distritoはとても特徴的なスタイルの全て大文字のフォントです。全ての文字に若干傾斜がついており、ロゴや見出しにぴったりなユニークなデザインとなっています。コロンビア、ボゴタ歴史地区からインスピレーションを受けた全て大文字のフォントです。

37. Ailerons

ailerons

Ailerons

Aileronsは異星の標識に使われていそうなフォント。独特な美的感性が漂っています。全て大文字のサンセリフ体で、どこに使っても印象的ですが、特にタイトルや見出しにはぴったりです。

38. Ethna

Modern fonts: ethna

Ethna

Ethnaはクラシックな見た目とお洒落なスタイルを併せ持ったフォントです。ビンテージとモダンのデザイン要素を組み合わせることにより全く新しいスタイルを確立している、ヒューマニストスタイルからインスピレーションを得たサンセリフ体フォントです。こちらのフォントはどんな用途にもぴったりです。

39. Noelle

noelle

Noelle

Noelleはポジティブな第一印象を与えられること間違いなしの幾何学的なセリフ体です。ミニマルなデザインで、どのような業界のタイトルや見出しにも最適です。多少ビンテージの要素も持っていますが、新しさも感じさせます。オンラインにも印刷にもぴったりです。また、おまけでスクリプト書体もついてきます。

40. Sequel

sequel

Sequel

Sequelはロゴや見出しにぴったりの丸みを帯びたフォントです。合字を豊富に使っているため、デザイン性の高い魅力的な印象を与えることができます。大胆でありながら、押し付けがましくはありません。

41. Higher

Higher

Higherもまたクラシックな見た目の洗練されたフォントです。非常に凝縮された訴求力の高い全て大文字のフォントで、どんな文字でも印象的にしてくれます。

42. Nano

nano

Nano

Nanoは斬新なデザインのサンセリフ体です。全て小文字なので、今回ご紹介するフォントの中でも特徴的なフォントといえます。文字のデザイン自体が非常に特徴的でお洒落なので、ロゴやブランディング用の素材として最適です。短い文章にはぴったりですが、長い文章になると少し読みにくいかもしれません。

43. Jollin

jollin

Jollin

Jollinは全体的に分厚く、いくつかの文字の先端がカールしたお洒落なフォントです。こちらのフォントはレギュラー書体とイタリック体から選ぶことができ、たくさんの代替となる文字も選べるので、気分に合わせてシンプルにしたり、装飾的にしたりすることができます。

44. Phenomena

phenomena

Phenomena

Phenomenaは幅が狭く、がっしりとしていて、角が丸みを帯びたフォントです。目を引くフォントなので、タイトルやロゴ、見出しに最適です。細いものから太いものまで、7種類のスタイルが選べるので、通常のテキストで利用しやすいでしょう。

45. Calibre

calibre

Calibre

Calibreコンテンツの中で良い意味で高さを際立たせることのできる非常に凝縮されたフォントです。全て大文字のフォントで、数字や記号、ヨーロッパに特有の文字も入力できます。

46. Sundays

sundays

Sundays

Sundaysは非常に現代的でありながら、どこかクラシックな雰囲気も併せ持つセリフ体のフォントです。他の古典的な似たようなフォントよりも細く、カーブしており、雑誌の見出しやタイトル、サイトのロゴや見出しなどに最適なデザインです。

47. Cornerstone

cornerstone

Cornerstone

Cornerstoneは、キューブ状のスタイルを持つがっしりしたフォントです。ロゴから見出しまで様々な用途で使えます。

48. One Day

one day

One Day

One Dayは途切れた線がユニークな厚みのないフォントです。こちらも全て小文字のフォントで軽くて薄いデザインが特徴です。数字と記号も使用でき、あまりがっしりとした印象を与えることなく、幾何学的な雰囲気を演出できます。

49. Kollektif

kollektif

Kollektif

Kollektifは幅広い用途で使えるクラシックなフォントです。幾何学的なデザインで2つの太さから選べます。印刷物にもウェブでの利用にも最適です

50. Nostalgia

Modern fonts: nostalgia

Nostalgia

次にご紹介するのは、まるで何十年も前に作成されたかのようなレトロな雰囲気を持つお洒落なフォント、Nostalgiaです。3つの書体から選べ、記号、合字、花の絵文字も入力できます。ロゴ、タイトル、ポスター、または招待状に最適です。

51. Elixia

elixia

Elixia

Elixiaは錬金術の世界観を彷彿とさせる幾何学的フォントです。全ての文字に加えられた余分な角がユニークなスタイルを作り出しています。

52. Salmon

salmon

Salmon

他にもSalmonがおすすめです。太くてミニマルなサンセリフ体のフォントです。タイトルやロゴ、見出しに最適。全て大文字のフォントで、塗りつぶしと枠線の2つから選べ、一緒に使ってもよく合います。

53. Thinoo

thinoo

Thinoo

Thinooもサンセリフ体のフォントです。細い書体と太い書体から選べ、数字、記号、句読点などあらゆる文字が含まれています。プロフェッショナルですっきりとした印象のフォントです。シンプルでありながら人目を引きます。あらゆるタイプのサイトや印刷物にぴったりです。

54. Summer Loving

summer loving

Summer Loving

他にも、複数の書体が選べてこのフォントだけであらゆるデザインができてしまう、とても楽しげなモダンフォントであるSummer Lovingもおすすめです。サンセリフ体のフォントと、プロジェクトをあっという間に彩ってくれる絵の具で描いたようなデザインも選べます。合字と代替の文字も含まれています。

55. Silverfake

Silverfake

Silverfake

Silverfakeはタイトルやロゴ、見出し、印刷物にぴったりな文字間隔の広いセリフ体のフォントです。例えば、Tシャツのロゴなどに最適です。

56. Vienna

vienna

Vienna

最後にご紹介するのはViennaです。雑誌の表紙に使われるようなクラシックなフォントの魅力をそのままに、現代の美しさの基準に合わせて修正を加えたセリフ体のフォントです。ミニマルなデザインで、大文字、数字、句読点が含まれます。

If modern fonts are just what your WordPress website needs 📝, you'll want to check out this guide to 50+ fresh options✨Click to Tweet

まとめ

ブランディングによりマッチするフォントを選びたい、コンテンツを全てのブラウザでより読みやすくしたいなど、WordPressサイトにカスタムフォントを使う理由は、人によって様々でしょう。いずれにせよ、好みのお洒落なフォントをアップロードするのはとてもメリットの大きいことです。

一方で、その手順は一見面倒に思えるかもしれません。フォントを探し、ダウンロードし「.zip」形式に変換し、FTPクライアントソフトから正しいディレクトリにアップロードしなければなりません。さらに、コードスニペットをテーマのCSSファイルの適切な部分に貼り付けなければなりません。この作業は手動で行うことも、プラグインを利用して行うこともできます(または開発者を雇用する方法も考えられます)。

どの方法を選んだとしても、最終的にはサイトがより個性的でスタイリッシュになることは間違いないでしょう。今回ご紹介した56個のフォントの中からあなたのWordPressサイトにぴったりなものが見つかれば幸いです。太字のもの、華奢なもの、丸みを帯びたもの、荒々しいもの、装飾的なもの、質素なもの、どのようなフォントを選んでも、きっとサイトがより魅力的なものになるでしょう!

(こちらもあわせてお読みください:WordPresで固定ページと投稿のタイトルを非表示にする方法


この記事はお気に召しましたでしょうか。KinstaのマネージドWordPressホスティングサービスもご確認ください。ウェブサイトをスピードアップし、知識・経験豊富なWordPressに精通したエンジニアによるカスタマーサポートを24時間365日ご利用いただけます。Google Cloudを使用したインフラストラクチャは、スケーラビリティ、パフォーマンス、およびセキュリティに特化。Kinstaの魅力はまだまだ他にもございます。当社のプランをご確認ください。