MANNY PERALTA / DESIGN TOOLS

Font Pairing Tool

Pair fonts, preview a real type system, then intelligently tune weight, size, line height, and tracking for the roles each font is playing.

Drag preview rows or use the arrow buttons to change the order, then lock the layout.

Font 3
TYPE SYSTEM / 2026
Font 1

Design gets stronger when typography has a clear job.

Font 2

A pairing should create hierarchy, rhythm, and contrast—not just put two attractive fonts next to each other.

Font 2

Use this preview to test how your fonts behave in a realistic system. Adjust the size, weight, spacing, and line height manually, or use Smart Type Tuning to create a practical starting point for the specific fonts and roles you selected. á é ñ ü — Aa Bb 123 🙂

Font 4
Explore the system →


    

  


  

    
How the Font Pairing Tool works

    
Load fonts from Google Fonts, Adobe Fonts, a CSS stylesheet, a direct font file, or your computer. Assign each font a role, test real copy, tune the typography, arrange the preview, then copy the CSS or share the pairing.


    

      
01 / LOADChoose a font source and load up to five fonts.

      
02 / ASSIGNGive each font a role: heading, subheading, body, accent, or button.

      
03 / TESTEnter custom text and adjust weight, size, line height, and letter spacing.

      
04 / ARRANGEUnlock the preview to drag the type roles into the order you want.

      
05 / EXPORTCopy the generated CSS or copy a share URL for the pairing.

    


    
Font sources: what to paste

    

      

        
Adobe Fonts Web Project

        
Create a Web Project in Adobe Fonts, add the families and styles you need, then copy the project CSS URL and the CSS font-family name shown by Adobe. The project URL normally uses use.typekit.net.

        Adobe project CSS
        https://use.typekit.net/abcd123.css
        CSS family name
        source-sans-3
      


      

        
CSS stylesheet link

        
Use a URL that returns CSS containing one or more @font-face rules. A Google Fonts or Fontshare stylesheet can work. A font product page is not a CSS link.

        Working example
        https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap
      


      

        
Direct font-file link

        
Use a URL that resolves to the actual font file, not a specimen or download page. The host must allow the font to be loaded by another website.

        Working example
        https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2
      


      

        
Local font upload

        
Upload a font from your computer to test it locally. The file stays in the browser and is not included in a shared URL.

        Supported formats
        
.woff2.woff.otf.ttf

      

    


    
Font store and foundry pages are not font sources. A URL such as a DaFont, Typeverything, MyFonts, or Creative Market specimen page is HTML, not CSS or a font file. Download the licensed or trial webfont and upload it here, or use the webfont CSS/file URL supplied by the foundry.


    
How Smart Type Tuning works

    
The tuning engine measures each loaded font in the browser, considers its assigned role and current size, checks available weights, compares it with the other active fonts, then adjusts hierarchy without hiding the controls from you.

    
Are uploaded fonts sent anywhere?

    
No. Uploaded font files are read locally in your browser for this tool. This page does not contain code that uploads the file to a server.

   
Can uploaded fonts be shared in the URL?

      
No. Local file contents are intentionally excluded from share URLs. The tool will tell you which slots need the font uploaded again.