← IndexWeb Font Library 2026
A Reference Guide

HP制作のための
Webフォント図鑑

Webサイト制作で実際に使えるフォント60種を、英字・日本語・用途別に分類してプレビュー付きで紹介。すべてGoogle Fontsで無料利用可、@import文をコピペするだけで使えます。

お気に入り

0
各フォントのボタンで追加。プロジェクトで使いたいフォントをここに集められます。
CATEGORIES
All 60 英字 Sans 10 英字 Serif 8 英字 Display 7 英字 Mono 4 日本語 ゴシック 9 日本語 明朝 5 日本語 装飾 10 日本語 手書き 7 組み合わせ Tips
01 — ENGLISH / SANS-SERIF

英字サンセリフ

最も汎用的な英字フォント。SaaS、テック系、コーポレートで定番。可読性とモダンな印象。

Inter 最頻出のニュートラルサンセリフ
頻出 geometric neutral
Build the future
The quick brown fox jumps over the lazy dog
Inter is a typeface family carefully crafted & designed for computer screens.
Figmaが使っていることで一気に普及した、最も「無難でいい」フォント。迷ったらこれ。長文の可読性も高く、ウェイトも豊富。
CSS @import@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); font-family: 'Inter', sans-serif;
Manrope 柔らかさのあるモダンサンセリフ
rounded friendly
Build the future
The quick brown fox jumps over the lazy dog
角が少し丸い柔らかいサンセリフ。SaaSやスタートアップで頻出。Interより親しみやすい印象。
CSS@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap'); font-family: 'Manrope', sans-serif;
Geist Vercel製の最新トレンド
トレンド tech vercel
Build the future
The quick brown fox jumps over the lazy dog
Vercel(Next.js)が作った新世代フォント。テック・開発者向けサイトで急速に普及中。クリーンでミニマル。
CSS@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&display=swap'); font-family: 'Geist', sans-serif;
Outfit ジオメトリックでスタイリッシュ
geometric modern
Build the future
The quick brown fox jumps over the lazy dog
ジオメトリックで都会的。ファッション系、エージェンシーサイトで使われる。Bold以上で本領発揮。
CSS@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap'); font-family: 'Outfit', sans-serif;
DM Sans 幾何学的で読みやすい
geometric low contrast
Build the future
The quick brown fox jumps over the lazy dog
DeepMind発のフォント。スタートアップ系、AI企業で頻出。低コントラストで読みやすく、長文にも適する。
CSS@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); font-family: 'DM Sans', sans-serif;
Plus Jakarta Sans 親しみやすさと洗練を両立
friendly corporate
Build the future
The quick brown fox jumps over the lazy dog
バランスのいい万能サンセリフ。SaaSのLP、コーポレートサイトでよく見る。Interよりやや個性がある。
CSS@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap'); font-family: 'Plus Jakarta Sans', sans-serif;
Space Grotesk テック系で爆発的に普及
トレンド tech distinctive
Build the future
The quick brown fox jumps over the lazy dog
少し角張った独特の表情。デザイン系・テック系で2020年代に爆発的に普及。差別化したいけど読みやすくしたい時に。
CSS@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap'); font-family: 'Space Grotesk', sans-serif;
Sora スタートアップ系の人気者
startup geometric
Build the future
The quick brown fox jumps over the lazy dog
幾何学的でクリーン。スタートアップやLPで頻出。Inter的だが、もう少し性格がある。
CSS@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;700&display=swap'); font-family: 'Sora', sans-serif;
Onest ニュートラルで質実剛健
neutral readable
Build the future
The quick brown fox jumps over the lazy dog
2024年頃から急上昇のニュートラルフォント。Interの代替候補として注目。やや暖かみがある。
CSS@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;700&display=swap'); font-family: 'Onest', sans-serif;
Work Sans ワークホース的な万能選手
versatile classic
Build the future
The quick brown fox jumps over the lazy dog
幅広いウェイトで万能に使える老舗。コーポレート、ブログ、何でも合う。
CSS@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap'); font-family: 'Work Sans', sans-serif;
02 — ENGLISH / SERIF

英字セリフ

伝統と上品さを表現するセリフ体。エディトリアル、高級ブランド、出版系で活きる。

Playfair Display エレガントの代名詞
頻出 elegant editorial
Build the future
The quick brown fox jumps over the lazy dog
高コントラストで雑誌的なエレガントさ。ファッション、料理、出版系の見出しで頻出。本文には不向き。
CSS@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap'); font-family: 'Playfair Display', serif;
Fraunces レトロモダンの個性派
トレンド retro distinctive
Build the future
The quick brown fox jumps over the lazy dog
レトロな表情と現代的なバリアブル機能を併せ持つ。スタジオサイト、エディトリアルで人気上昇中。
CSS@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap'); font-family: 'Fraunces', serif;
DM Serif Display 大胆で印象的な見出し用
display bold
Build the future
The quick brown fox jumps over the lazy dog
見出し専用の太いセリフ。インパクトのあるヒーローテキスト、ロゴに。
CSS@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); font-family: 'DM Serif Display', serif;
Cormorant Garamond 繊細で気品ある古典セリフ
classic refined
Build the future
The quick brown fox jumps over the lazy dog
細く繊細で気品ある古典セリフ。高級レストラン、ウエディング、コスメサイトで多用される。
CSS@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;700&display=swap'); font-family: 'Cormorant Garamond', serif;
EB Garamond 古典中の古典、本のような佇まい
book traditional
Build the future
The quick brown fox jumps over the lazy dog
伝統的なGaramondの再現。ブログ、エッセイ、長文の読み物に最適。本文向きで穏やか。
CSS@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&display=swap'); font-family: 'EB Garamond', serif;
Lora 本文向けのモダンセリフ
body text readable
Build the future
The quick brown fox jumps over the lazy dog
本文用に最適化されたモダンセリフ。ブログ・記事・読み物で頻出。Mediumっぽい雰囲気。
CSS@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&display=swap'); font-family: 'Lora', serif;
Crimson Pro 学術書のような正統派
academic book
Build the future
The quick brown fox jumps over the lazy dog
学術書や文学のような佇まい。インテリジェントな印象を与えたい時、長文を読ませたい時に。
CSS@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;700&display=swap'); font-family: 'Crimson Pro', serif;
Source Serif 4 Adobe製のニュートラル本文セリフ
adobe neutral
Build the future
The quick brown fox jumps over the lazy dog
Adobe製の汎用セリフ。長文に強く、UIにも溶け込む。コーポレート系の本文で扱いやすい。
CSS@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap'); font-family: 'Source Serif 4', serif;
03 — ENGLISH / DISPLAY

英字ディスプレイ・装飾

見出しやロゴ向けの個性派フォント。本文には不向き。一発で印象を作る用。

Bricolage Grotesque 2024年以降の人気急上昇
トレンド condensed
Build the future
The quick brown fox jumps over the lazy dog
2024年以降に大ブレイクした個性派サンセリフ。ヒップでクリエイティブ系のサイトで頻出。
CSS@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap'); font-family: 'Bricolage Grotesque', sans-serif;
Bebas Neue 縦長コンデンスドの定番
頻出 condensed caps only
BUILD THE FUTURE
THE QUICK BROWN FOX JUMPS OVER
縦長の大文字専用フォント。ポスター、スポーツ系、インパクトのあるヒーローに。20年以上愛される定番。
CSS@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); font-family: 'Bebas Neue', sans-serif;
Anton 超太いコンデンスド
heavy poster
Build the future
The quick brown fox jumps over the lazy dog
Bebasより太く、より強い印象。バーガーショップ、スポーツブランド、ライブイベント等。
CSS@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); font-family: 'Anton', sans-serif;
Archivo Black 太くて広めのインパクト系
heavy brutalist
Build the future
The quick brown fox jumps over the lazy dog
太くて広めの強い見出し用。ブルータリスト系、ストリート系のデザインで頻出。
CSS@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap'); font-family: 'Archivo Black', sans-serif;
Big Shoulders Display 力強いコンデンスド
condensed industrial
Build the future
The quick brown fox jumps over the lazy dog
力強さと現代性を兼ね備えたコンデンスド。スポーツ、自動車、産業系。
CSS@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;900&display=swap'); font-family: 'Big Shoulders Display', sans-serif;
Caveat 手書き風カジュアル
handwritten casual
Build the future
The quick brown fox jumps over the lazy dog
マーカーで書いたような手書きフォント。アクセント、引用、ブランドのシグネチャに。
CSS@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap'); font-family: 'Caveat', cursive;
Permanent Marker マジックペン風
marker graffiti
Build the future
The quick brown fox jumps over the lazy dog
マジックペン風の太い手書き。エネルギッシュな雰囲気、ストリート、Y2K風に。
CSS@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); font-family: 'Permanent Marker', cursive;
04 — ENGLISH / MONO

等幅フォント

コードブロック、メタ情報、テック感を出したい場面で。等幅(全文字同じ幅)。

JetBrains Mono 開発者向け定番
頻出 code ligatures
const future = 0;
() => { return data.map(x => x * 2); }
JetBrains社製の開発者向け等幅。リガチャ(==>の連結)対応。コードブロック、メタ情報の定番。
CSS@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'); font-family: 'JetBrains Mono', monospace;
IBM Plex Mono 企業らしい正統派
corporate readable
const future = 0;
() => { return data.map(x => x * 2); }
IBM社製の正統派等幅。少し手書き感のある角を持ち、温かみがある。コーポレートテック系で頻出。
CSS@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap'); font-family: 'IBM Plex Mono', monospace;
Space Mono レトロフューチャー感
retro distinctive
const future = 0;
() => { return data.map(x => x * 2); }
レトロな雰囲気のあるユニーク等幅。Y2K、サイバー、エディトリアルなアクセントに。
CSS@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); font-family: 'Space Mono', monospace;
Roboto Mono 無難で読みやすい
neutral google
const future = 0;
() => { return data.map(x => x * 2); }
Googleの定番等幅。クセがなく汎用的。ドキュメント、UIのメタ情報に。
CSS@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap'); font-family: 'Roboto Mono', monospace;
05 — 日本語 / ゴシック

日本語ゴシック体

日本語サイトの本文・UIで最頻出。読みやすさと現代的な印象を両立できる定番選択肢。

Noto Sans JP 迷ったらこれの代名詞
頻出 汎用
美しい設計
未来をデザインする、すべてのために。
Notoは「No Tofu(豆腐文字なし)」がコンセプト。世界中の言語をカバーします。
Google製の日本語Web標準。圧倒的に多く採用されている。ウェイトが豊富で表現の幅が広い。
CSS@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap'); font-family: 'Noto Sans JP', sans-serif;
Zen Kaku Gothic New 柔らかく品のあるゴシック
人気 refined
美しい設計
未来をデザインする、すべてのために。
Notoより上品で柔らかい印象。コーポレート、ブランドサイトでよく使われる新世代の人気フォント。
CSS@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap'); font-family: 'Zen Kaku Gothic New', sans-serif;
Zen Kaku Gothic Antique わずかな曲線で温かみを
warm readable
美しい設計
未来をデザインする、すべてのために。
わずかにアンティーク風で温かみがある。読みやすさとブランド感の両立が必要なサイトに。
CSS@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap'); font-family: 'Zen Kaku Gothic Antique', sans-serif;
M PLUS 1p プロポーショナル幅で読みやすい
proportional classic
美しい設計
未来をデザインする、すべてのために。
老舗の人気Webフォント。プロポーショナル幅で英数字とのバランスが良い。長文に向く。
CSS@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap'); font-family: 'M PLUS 1p', sans-serif;
M PLUS Rounded 1c 丸ゴシックの代表格
rounded friendly
美しい設計
未来をデザインする、すべてのために。
親しみやすい丸ゴシック。子供向け、教育、医療、女性向けサービス、保育園・病院サイトで頻出。
CSS@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap'); font-family: 'M PLUS Rounded 1c', sans-serif;
Zen Maru Gothic 上品な丸ゴシック
rounded elegant
美しい設計
未来をデザインする、すべてのために。
M PLUS Roundedよりも控えめで上品な丸ゴシック。和カフェ、ライフスタイル、コスメに合う。
CSS@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap'); font-family: 'Zen Maru Gothic', sans-serif;
BIZ UDPGothic ユニバーサルデザイン
UD accessible
美しい設計
未来をデザインする、すべてのために。
ユニバーサルデザインを意識した可読性重視ゴシック。公共サイト、行政、年配層向けに最適。
CSS@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap'); font-family: 'BIZ UDPGothic', sans-serif;
Kosugi Maru 軽やかな丸ゴシック
rounded light
美しい設計
未来をデザインする、すべてのために。
軽やかな丸ゴシック。読みやすさを保ちつつカジュアル。ブログ、コラム、リフレッシュ感のあるサイトに。
CSS@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap'); font-family: 'Kosugi Maru', sans-serif;
Sawarabi Gothic 控えめで穏やか
subtle calm
美しい設計
未来をデザインする、すべてのために。
主張しすぎない穏やかなゴシック。和風カフェ、ナチュラル系ライフスタイルブランドに。
CSS@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); font-family: 'Sawarabi Gothic', sans-serif;
06 — 日本語 / 明朝

日本語明朝体

伝統と上品さを表現する明朝体。和テイスト、高級感、文学的な雰囲気に。

Noto Serif JP 日本語明朝のWeb標準
頻出 standard
美しい設計
未来をデザインする、すべてのために。
明朝体のWeb標準。コーポレート、出版、和テイストで圧倒的に多く採用されている。
CSS@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap'); font-family: 'Noto Serif JP', serif;
Shippori Mincho 力強くも上品な明朝
人気 elegant
美しい設計
未来をデザインする、すべてのために。
力強さと上品さを兼ね備えた明朝。ブランドサイト、料亭、和モダンなEコマースで人気。
CSS@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap'); font-family: 'Shippori Mincho', serif;
Zen Old Mincho 古典的な雰囲気の明朝
classical traditional
美しい設計
未来をデザインする、すべてのために。
古典的で趣のある明朝。文学、伝統工芸、神社仏閣、お茶屋など和文化系サイトに合う。
CSS@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&display=swap'); font-family: 'Zen Old Mincho', serif;
Sawarabi Mincho 細く繊細な明朝
delicate light
美しい設計
未来をデザインする、すべてのために。
繊細で軽やかな明朝。コスメ、ジュエリー、女性向けライフスタイルブランドに。
CSS@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap'); font-family: 'Sawarabi Mincho', serif;
BIZ UDPMincho ビジネス向けユニバーサル明朝
UD business
美しい設計
未来をデザインする、すべてのために。
ビジネス文書を意識した可読性高い明朝。コーポレート、報告書系、IRページに。
CSS@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&display=swap'); font-family: 'BIZ UDPMincho', serif;
07 — 日本語 / 装飾

日本語ディスプレイ・装飾

見出しやロゴ向けの個性派和文フォント。本文には不向き。一発で世界観を作る用。

Dela Gothic One 超太いインパクト系
頻出 heavy poster
美しい設計
未来をデザインする
超極太のインパクト系日本語。ポスター、バナー、ヒーローのキャッチに。本文には絶対使わない。
CSS@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap'); font-family: 'Dela Gothic One', sans-serif;
RocknRoll One ポップでアクの強い太字
pop heavy
美しい設計
未来をデザインする
ポップでアクの強い太字。エンタメ、イベント告知、若者向けサービスに。
CSS@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap'); font-family: 'RocknRoll One', sans-serif;
Reggae One ストリート・グラフィティ風
street stencil
美しい設計
未来をデザインする
ステンシル風で勢いのあるディスプレイフォント。ストリート、音楽、スポーツ系。
CSS@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap'); font-family: 'Reggae One', sans-serif;
DotGothic16 ピクセル(8bit)風
pixel retro game
美しい設計
未来をデザインする
ファミコン世代のドット字フォント。レトロゲーム、ピクセルアート、Y2K系で活躍。
CSS@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap'); font-family: 'DotGothic16', sans-serif;
Kaisei Decol 装飾的で繊細な明朝
ornate refined
美しい設計
未来をデザインする
線が細く装飾的な明朝。和菓子、お茶、料亭、コスメなど上品な世界観に。
CSS@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&display=swap'); font-family: 'Kaisei Decol', serif;
Hina Mincho かわいく繊細な明朝
cute delicate
美しい設計
未来をデザインする
繊細で可愛らしい明朝。手作り雑貨、ハンドメイド、かわいい系の和ブランドに。
CSS@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap'); font-family: 'Hina Mincho', serif;
Yusei Magic レトロでポップな手書き調
retro pop
美しい設計
未来をデザインする
昭和レトロ感のあるポップな手書き風。お祭り、駄菓子屋、レトロカフェに。
CSS@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap'); font-family: 'Yusei Magic', sans-serif;
Yuji Syuku 毛筆風の上品な手書き
brush elegant
美しい設計
未来をデザインする
毛筆のような上品な書き文字。日本酒、伝統工芸、和食店、書道関連に。
CSS@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap'); font-family: 'Yuji Syuku', serif;
Klee One 教科書体風で親しみやすい
textbook friendly
美しい設計
未来をデザインする、すべてのために。
小学校の教科書のような親しみやすい字。学習サービス、子供向け、教育関連で活躍。
CSS@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap'); font-family: 'Klee One', cursive;
Kiwi Maru きわめて柔らかい丸文字
soft cute
美しい設計
未来をデザインする、すべてのために。
かわいくて柔らかい丸文字。スイーツ、子供向け、女性向けかわいい系ブランドに。
CSS@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap'); font-family: 'Kiwi Maru', serif;
08 — 日本語 / 手書き

日本語手書き・カジュアル

温かみと親しみを表現する手書き調フォント。アクセント、引用、ハンドメイド系に。

Yomogi ナチュラルな手書き
handwritten natural
美しい設計
未来をデザインする、すべてのために。
ナチュラルでやさしい手書き。ハンドメイド、雑貨、ベーカリー、ブログのアクセントに。
CSS@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap'); font-family: 'Yomogi', cursive;
09 — PAIRINGS

定番組み合わせ

見出し用と本文用の組み合わせ例。これさえ覚えれば、すぐに見栄えが整う。

CORPORATE / SAAS
Inter+Noto Sans JP
Build the future
未来をデザインする
テクノロジーで世界を変える、すべての挑戦者へ。私たちは新しい価値を生み出す力になります。
最も定番。汎用性最強。迷ったらこれ。
EDITORIAL / BLOG
Playfair+Lora
Build the future
A typeface family carefully crafted for screens. The quick brown fox jumps over the lazy dog every single day.
セリフ見出し+本文セリフ。雑誌・ブログ向け。
和モダン
Shippori+Zen Kaku
美しい設計を、永く。
伝統と革新を融合させ、新しい価値を生み出す。私たちのアプローチは、時代を超えて愛されるものを目指すことから始まります。
明朝見出し+ゴシック本文。和モダンの王道。
TECH / DEVELOPER
Geist+JetBrains Mono
Build the future
A modern toolkit for developers.
npm install @vercel/geist
サンセリフ+等幅。テック・開発者ツール定番。
LUXURY BRAND
Cormorant+Manrope
Build the future
Crafted with attention to every detail. Each piece tells a story of dedication and timeless elegance.
繊細セリフ+丸みサンセリフ。コスメ・ジュエリー。
PLAYFUL / CASUAL
Bricolage+M+ Rounded
Build the future
未来をデザインする
楽しく、わかりやすく、みんなにやさしい。そんなサービスを目指しています。
個性派+丸ゴシック。カジュアルブランド向け。
RETRO / Y2K
Fraunces+Space Mono
Build the future
Studio · Design · Code · 2026
レトロセリフ+レトロ等幅。Y2K/エディトリアル。
IMPACT / POSTER
Bebas Neue+Inter
BUILD THE FUTURE
Big, bold, and direct. Designed to grab attention and lead the conversation.
縦長コンデンスド+ニュートラル。スポーツ・イベント。
10 — PRO TIPS

フォント選びのコツ

実用的な6つのポイント。

01

2フォントまでに絞る

見出し用と本文用の2種類で十分。3つ以上使うとごちゃつく。基本はdisplay + bodyの組み合わせ。

02

日英は別々に指定

日本語と英語で見え方が違うので、別フォントをfont-familyにカンマ区切りで指定すると最適化できる。例: 'Inter', 'Noto Sans JP', sans-serif

03

ウェイトは絞ってロード

使うウェイトだけ@importする。wght@400;500;700のように指定。全部読み込むとロードが重い。

04

display=swapで初回表示を早く

必ず&display=swapを付ける。フォント読み込み完了前にフォールバックで先に表示されるので体感が速い。

05

セルフホストも検討

本格的な制作ではGoogle Fontsをローカルにダウンロードして配信することでパフォーマンスとプライバシーが向上する。

06

本文には個性的すぎないフォント

本文に装飾フォントを使うと読みづらい。装飾系は見出しや短いコピーまで。本文はNoto Sans JP、Inter、Loraなど王道で。