SEOツール
計算ツール
職業別ツール
フォントジェネレーター＆ペアリングツール
1,900以上のGoogleフォントを閲覧、完璧なフォントペアリングを見つけましょう。プレビュー、CSSエクスポート、ダウンロード。無料。
Category:
Script:
Sort:
Preview text:
Size:
24px
0 fonts
Click a font to select as heading, click again for body
Bilingual mode (RTL heading + LTR body)
Heading Font
None selected
Body Font
None selected
Heading Size36px
Body Size16px
Heading Weight
Body Weight
Heading Color
Body Color
Heading Line Height1.3
Body Line Height1.7
Heading Letter Spacing0px
Body Letter Spacing0px
✨ Suggested Pairings
Dark Mode
Background:
The Art of Beautiful Typography
Discover the perfect font combination
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.
Get Started
How Typography Shapes Design
Good typography can make or break a design. The fonts you choose communicate personality, set the tone, and guide readers through your content. A well-chosen font pairing creates visual hierarchy and keeps readers engaged.
"Typography is two-dimensional architecture, based on experience and imagination." — Hermann Zapf
When pairing fonts, look for contrast without conflict. A serif heading with a sans-serif body creates a classic, readable combination. The key is finding fonts that complement each other while maintaining clear hierarchy.
Visual Hierarchy
Create clear levels of importance through size, weight, and contrast to guide the reader's eye.
Readability First
Choose body fonts optimized for screen reading with generous x-height and open counters.
Perfect Pairing
Combine fonts from different categories for contrast: serif with sans-serif creates harmony.
Use Bunny Fonts
GDPR
Privacy-friendly, EU-compliant alternative
📋 CSS / Import Code
/* Select fonts to generate code */
📦 Download Fonts
🔗 Share Pairing
All Google Fonts are free and open source under the SIL Open Font License.
How to Find the Perfect Font Pairing
Finding the right font pairing starts with understanding your project's personality. A corporate website needs professional, clean fonts, while a creative portfolio can use more expressive typefaces.
- Start with your heading font — this sets the tone and personality of your design
- Choose a body font that contrasts but complements the heading
- Test readability at different sizes — body text should be comfortable to read at 16px
- Check that both fonts support the languages you need (especially for RTL scripts)
- Preview your pairing in context using our mockup templates
Font Pairing Rules & Typography Basics
Great font pairings follow a few fundamental principles:
- Contrast, not conflict: Pair fonts from different categories (serif + sans-serif) for visual interest without clashing
- Limit to 2-3 fonts: Using more fonts creates visual chaos and slows page loading
- Match x-height: Fonts with similar x-heights look more harmonious when used together
- Consider weight variety: Choose fonts with multiple weights so you can create hierarchy within each font
- Test with real content: Lorem ipsum hides readability issues — test with actual text
Best Google Fonts for Headlines
Headlines need to grab attention and convey personality. Here are top picks by style:
- Modern & Clean: Montserrat, Poppins, Inter, DM Sans
- Elegant & Editorial: Playfair Display, Cormorant Garamond, EB Garamond, Lora
- Bold & Impactful: Oswald, Bebas Neue, Archivo Black, Secular One
- Friendly & Rounded: Nunito, Quicksand, Rubik, Varela Round
- Hebrew Headlines: Frank Ruhl Libre, Secular One, Suez One, Karantina
Best Google Fonts for Body Text
Body fonts must prioritize readability and comfort for extended reading:
- Versatile Workhorses: Roboto, Open Sans, Lato, Source Sans 3
- Elegant Serifs: Merriweather, Source Serif 4, Crimson Pro, Literata
- Accessible: Lexend (designed for readability), Inter, Atkinson Hyperlegible
- Hebrew Body: Heebo, Assistant, Noto Sans Hebrew, Alef
- Arabic Body: Cairo, Noto Sans Arabic, Tajawal
Hebrew & RTL Font Pairing Guide
Designing for Hebrew and Arabic requires special attention to typography:
- Choose fonts with full Hebrew character sets — not all Google Fonts support Hebrew. Filter by "Hebrew" script in our browser
- Pair Hebrew heading with Hebrew body — mixing Hebrew heading fonts with English body fonts works for bilingual sites
- Test RTL layout thoroughly — our bilingual mode lets you preview how RTL headings interact with LTR content
- Popular Hebrew pairings: Frank Ruhl Libre + Heebo, Secular One + Assistant, Rubik + Heebo
- Consider font weight availability — some Hebrew fonts only come in Regular and Bold, limiting your design options
How to Use Custom Fonts on Your Website
There are three main methods to add Google Fonts to your website:
- HTML Link Tag (recommended): Add a
<link>tag in your HTML<head>. This is the fastest method as it leverages Google's global CDN - CSS @import: Add an
@importrule at the top of your CSS file. Simpler but slightly slower than the link tag method - Self-hosting: Download the font files and serve them from your own server. Best for privacy (GDPR) and performance control
Our Export tab generates ready-to-use code for all three methods. For GDPR compliance, toggle the Bunny Fonts option or download and self-host.
Google Fonts vs Bunny Fonts (GDPR)
Since 2022, using Google Fonts via their CDN may violate GDPR in the EU because it transmits user IP addresses to Google's servers. Here's how the alternatives compare:
- Google Fonts CDN: Fast, reliable, widely cached — but sends user data to Google
- Bunny Fonts: Drop-in replacement (same fonts, same API), hosted in EU, no tracking, GDPR compliant, free
- Self-hosting: Download fonts and serve from your server — full control, no third-party requests, but you manage caching
Our tool lets you switch between Google and Bunny Fonts with one click. For EU-facing websites, we recommend Bunny Fonts or self-hosting.
よくある質問
Our tool provides access to over 1,900 font families from Google Fonts, including serif, sans-serif, display, handwriting, and monospace categories. The catalog is updated automatically as Google adds new fonts.
Yes, completely free with no limits, no signup required, and no hidden costs. All Google Fonts are open source under the SIL Open Font License, meaning you can use them freely in personal and commercial projects.
Font pairing is the art of selecting two or more complementary typefaces that work together harmoniously. Typically, you choose one font for headings and another for body text, creating visual hierarchy and contrast while maintaining readability.
Yes! Our tool includes full RTL (right-to-left) support for Hebrew and Arabic fonts. You can filter by script to find Hebrew or Arabic fonts, and use the bilingual mode to preview RTL headings with LTR body text.
Use our Export tab to generate a CSS @import statement or an HTML link tag. Simply copy the code and paste it into your website's stylesheet or HTML head section. We also provide the font-family CSS rules ready to use.
Yes, use the "Download as ZIP" button in the Export tab. It downloads the selected font files in WOFF2 format along with a CSS file for self-hosting. All Google Fonts are free for offline use.
Both offer the same fonts. Google Fonts serves them from Google's CDN, while Bunny Fonts is a GDPR-compliant alternative that doesn't track users. Toggle the Bunny Fonts option in the Export tab if you need EU privacy compliance.
Our engine uses a combination of curated expert pairings (including Hebrew and Arabic combinations) and a scoring algorithm that considers category contrast, script compatibility, font popularity, and weight variety to suggest the best matches.
フルポテンシャルを解放
すべてのツールへの無制限アクセス、優先処理、プレミアム機能を入手。