フォントペアリングツール – Googleフォントの組み合わせを無料検索

The tool helps you build heading+body font duos using only Google Fonts and live web previews. To create a pairing, type or paste your sample text into the "Custom Text" box, pick a body font from the left panel, then choose a heading font from the right panel; use the "Randomize" button to get suggested combinations. Adjust size with the "Heading Size" and "Body Size" sliders and tweak weight, letter spacing and line height using the controls under each preview. When you’re happy, click "Copy CSS" to copy the ready-to-paste @import and font-family declarations, or use "Download PNG" to grab a 1200×800 preview image.

All fonts are pulled directly from the Google Fonts API; previews load the WOFF2 files that Google serves when available, falling back to WOFF/TTF for older browsers. The "Copy CSS" export gives you the standard @import or <link> snippets pointing to fonts.googleapis.com, and browsers then request fonts from fonts.gstatic.com as WOFF2/WOFF. Because the tool does not host font files, you won’t get .ttf/.otf downloads from it — if you need raw font files, download them from the Google Fonts family page. Expect each font family weight to add roughly 30–160 KB compressed (WOFF2), so selecting many weights increases page load.

Yes — use the "Copy CSS" button to get a ready-made CSS block (either @import or <link> plus font-family and fallbacks), and use "Export JSON" to download a .json file with the font family names, weights, sizes, and color hex codes for automation. The tool also offers "Download PNG" which exports a raster preview as a 1200×800 PNG by default (transparent background option is available), and you can change the export dimension up to 2000×2000 before downloading. There is no embedded watermark and exports are free with no signup; raw font file downloads are intentionally not provided because fonts are served via Google Fonts licensing.

You can upload a logo or background image via the "Add Image" button for more realistic mockups; supported file types are PNG, JPG/JPEG and SVG, and we accept files up to 5 MB. Raster images are constrained to 2000×2000 pixels for performance — larger images will be reduced on upload and may appear slightly compressed in the PNG preview. Note that HEIC/HEIF files from iPhones are not supported by Safari conversion, so convert them to JPG/PNG first; uploaded images are stored only in your browser session/localStorage and aren’t uploaded to our servers permanently.

Start by choosing contrasting roles: pick a display or serif for headings and a neutral sans-serif for body, or vice versa, then use the "Lock" buttons to explore alternatives for the other role without losing what works. Use the size ratio recommendations in the UI (1.25–1.6x heading-to-body size) and check x-height and weight pairing — avoid pairing two fonts with identical x-height and stroke contrast if you need strong hierarchy. Use the "Preview at 16px/24px/40px" presets to verify legibility at common reading sizes; the tool’s live line-height and letter-spacing controls let you refine web-ready settings before copying CSS.

The interface is responsive: on mobile the font picker collapses into a single-column list and sliders turn into touch-friendly steppers, but mobile browsers (especially iOS Safari) may delay or throttle font downloads which can cause a flash of unstyled text (FOUT) during preview. iOS Safari also has tighter memory limits — if you select many font weights and request a large PNG export (>1200 px), the preview can fail with an "Out of Memory" message; in that case reduce weights or switch to desktop for exporting. For reliable exports and heavier workflows, use Chrome/Firefox on desktop where WOFF2 is supported and background exports are less constrained.

Blank previews usually come from JavaScript being blocked or an adblocker extension blocking fonts.googleapis.com; try opening the dev console for a CORS or 403 error, then disable extensions or allowlist the site. If a selected weight doesn’t appear, it means that weight isn’t available for that Google Font family — use the weight dropdown or the "Auto-select weights" option to choose supported weights only. For share links not loading correctly, ensure the URL length didn’t exceed 2000 characters; if your custom text is very long, shorten it before generating the permalink.

The tool provides an estimated compressed payload for the selected font families and weights based on current Google Fonts WOFF2 sizes: expect ~30–160 KB per weight depending on glyph set. These are estimates — actual network cost varies by browser, TLS overhead, and whether the user already has those fonts cached. If you select 4 families with 4 weights each, budget roughly 500 KB–1 MB for first visit; the tool recommends subsetting (fewer weights) or using variable fonts when available to reduce payload. The estimator is conservative and excludes other assets like images or CSS.

All Google Fonts provided through the tool are licensed for commercial use under open-source licenses (typically SIL Open Font License or Apache), so you can use the CSS snippet in commercial websites without additional fees. The tool itself does not change font licensing: it only generates links to Google Fonts — if you need to self-host font files for stricter audit trails, download the font from the official Google Fonts family page and keep the license file. Attribution is not required by Google Fonts but keeping a note of the font name and license in project documentation is a practical best practice for compliance.

The Font Pairing Tool focuses on rapid web‑ready pairing and exports CSS/JSON for developers, whereas Photoshop/Sketch provide pixel-level rendering, kerning, OpenType features and CMYK color workflows that this web tool doesn’t emulate. Use this tool for fast page previews, quick CSS snippets and browser-accurate font loading behavior; switch to Photoshop/Illustrator for final print assets or to test advanced typography features such as discretionary ligatures or variable font axis manipulation. For font management (activating/deactivating installed fonts) use FontBase or a native font manager — this tool does not install fonts on your system.

Preview rendering and pairing logic run client-side in your browser for immediate feedback; uploaded logos and saved favorites are stored in localStorage and session only, not tied to an account, and you can clear them any time with the "Reset" button or by clearing site data in your browser. Generated CSS uses public Google Fonts links, so when you copy and paste it your users’ browsers will request fonts from fonts.gstatic.com — that network request is outside our tool. There is no signup, analytics are limited to anonymous error reporting (opt-in) and exported files (PNG/JSON) are generated locally and downloaded to your device.

Click "Save Pair" to store a pairing locally; the tool uses localStorage so saved favorites persist on the same browser until you clear site data, and there’s no account required. Use the "Share Link" button to generate a permalink that encodes fonts, weights, sizes, colors and up to ~2000 characters of custom text; very long sample text or embedding large SVG data may exceed that URL length and cause truncation. If your permalink is too long, use "Export JSON" to share settings as a .json file instead, which other users can import via the "Import JSON" control.