Free
Word to HTML Converter
Turn Word documents (.docx) or text pasted from Word into clean HTML or Markdown for any website, CMS or email.
Web Font Pairing & @font-face Generator
Browse hand-picked Google Fonts pairings or choose your own, preview them with a fluid type scale, and copy the link tags, CSS and self-hosting @font-face rules. Previews load the chosen fonts from Google Fonts.
Choose a pairing
Or pick your own
Includes 100 popular Google Fonts. Type in the search box and press Enter to pick the first match.
Type scale
| Variable | Used for | Size |
|---|
Preview
Previews load the two chosen fonts from Google Fonts (fonts.googleapis.com and fonts.gstatic.com), so Google sees your IP address, as on any site that uses Google Fonts. Nothing you type is sent. Untick to see only your device’s fallback fonts.
New collection
A smaller subheading
Good pairings use contrast: a heading with character and a body font that stays easy to read at small sizes. This line has bold words and italic words so you can check both styles.
Third-level heading
Small print and captions use the smallest step of the scale.
Edit the sample text
Get the code
Hosting the font files on your own server means no requests to Google. Download the files (for example from fonts.google.com or google-webfonts-helper), convert them to WOFF2 if needed, check the licence (most Google Fonts use the SIL Open Font License), then fill in the form.
Tokens: {family} (lower-case, hyphens), {weight}, {style} (normal or italic), {ext}. Rename your files to match, or change the pattern.
@font-face rules
Preload tags for the <head>
Preload tags need the crossorigin attribute even for files on your own site. Use the font-family name above in your CSS, and keep a fallback stack after it.
About the tool
How the Font Pairing Generator works
The Web Font Pairing & @font-face Generator helps you choose two Google Fonts that work well together and gives you the code to use them. Start with one of 42 hand-picked pairings, filter them by style (modern, elegant, playful, editorial, tech, bold, classic or friendly) or press Shuffle. You can also pick any heading and body font from a searchable list of 100 popular Google Fonts and choose the weights. The preview shows a headline, paragraph, buttons, subheadings, bold and italic text and small print, on a light or dark background, and you can type your own sample text.
Set a base font size and a scale ratio to build a type scale for h1 to h6, body text and small print. Leave fluid sizes on and the tool writes clamp() values that grow smoothly from a small screen to a large one, using rem units so text still respects the visitor’s browser settings. The CSS tab gives you font-family variables with fallback font stacks, the scale as CSS custom properties and the heading and body rules. The HTML tab gives the Google Fonts <link> tags with preconnect and only the weights you picked, with display=swap, and there is a CSS @import version too.
If you would rather not load fonts from Google, the Self-host tab writes @font-face blocks for the files on your own server: choose the weights and styles, a file path pattern, WOFF2 (and WOFF for very old browsers), font-display, an optional unicode-range and the preload tags. One variable font file is supported too. The code is generated in your browser and the tool does not use AI. To show the real fonts, the preview loads just the two chosen fonts from Google Fonts, so Google sees your IP address; you can turn the preview off to see only your fallback fonts.
Frequently asked questions
What makes a good font pairing?
Contrast with harmony. Usually one font with character for headings, such as a serif or display font, and a calm, very readable font for body text. Fonts with similar proportions, or two styles from the same family, feel consistent. Two fonts that are too alike, or two decorative ones, tend to clash.
Does the preview send anything to Google?
To show the real fonts, the page loads the two chosen fonts from fonts.googleapis.com and fonts.gstatic.com, just like any website that uses Google Fonts, so Google sees your IP address. The text you type is never sent. Untick “Show the real fonts” to stop these requests and see only your fallback fonts.
Should I use the <link> tags or @import?
Use the <link> tags in the <head> when you can. The browser finds them straight away, and preconnect starts the connection early. An @import inside a CSS file is only discovered after that file downloads, so the fonts arrive later.
What does clamp() do in the type scale?
clamp(min, preferred, max) lets a font size grow with the screen width but never go below the minimum or above the maximum. The tool works out each step so text is your base size on small screens and your large-screen size on wide screens, changing smoothly in between.
Is it better to self-host Google Fonts?
Self-hosting avoids requests to Google, which can help with privacy rules such as the GDPR, and lets you control caching. Download the font files, convert them to WOFF2 if needed, upload them, and paste the @font-face rules this tool writes. Most Google Fonts use the SIL Open Font License, which allows this.
Which font-display value should I use?
swap shows text in a fallback font straight away and switches when the web font loads, which is the usual choice. optional avoids any layout shift by using the web font only if it is ready almost at once. block hides text for a short time, which is rarely worth it.
More free AI tools
- Developer
- SEOFree
Open Graph & Social Preview Checker
Preview how your page looks when shared on Facebook, X, LinkedIn, WhatsApp and Slack, and fix your Open Graph tags.
- DesignFree
Color Palette from Image
Extract the main colours from any image and copy them as HEX, RGB or HSL, or export CSS, Tailwind and JSON.