FREE TRIAL

Sign In

web design

Top 50 Google Font Pairings [Handpicked by Pro Designers]

Alexandra Mercier, March 10, 2020

The fonts you decide to use on your website can make or break your design.

However, with thousands of free fonts available online, choosing the perfect combinations can be a time consuming exercise, even for experienced designers.

In this article, we showcase the most beautiful font pairings from Google that can easily be added to your website.

Note: because font choices are subjective, our design team has handpicked their tops fonts based on legibility, design flexibility, and overall aesthetic. To help you make your decision, we’ve sorted the fonts by style: classic, elegant, modern, creative, and minimalist.

Classic Font Pairings

Font pairing style: Classic, Serif + Sans Serif
Title font: Playfair Display
Paragraph font: Source Sans Pro
Text color: RGB(240, 214, 187)
Background color: 
RGB(53, 53, 53)
Additional color(s): 
RGB(160, 138, 127)

Font pairing style: Classic, Serif + Sans Serif
Title font: Playfair Display
Paragraph font: Source Sans Pro
Text color: RGB(240, 214, 187)
Background color: 
RGB(53, 53, 53)
Additional color(s): 
RGB(160, 138, 127)

Font pairing style: Classic, Serif + Sans Serif
Title font: Quattrocento
Paragraph font: Quattrocento Sans
Text color: RGB(226, 223, 218)
Background color: RGB(38, 38, 38)
Additional color(s): RGB(175, 152, 136)

Font pairing style: Classic, Serif + Serif
Title font: Quattrocento
Paragraph font: Fanwood Text
Text color: RGB(249, 246, 239)
Background color: RGB(109, 106, 101)
Additional color(s): RGB(191, 175, 160), RGB(217, 203, 192)

Font pairing style: Classic, Slab + Serif
Title font: Oswald
Paragraph font: Quattrocento
Text color: RGB(38, 25, 17)
Background color: RGB(249, 246, 239)
Additional color(s): RGB(102, 74, 50), RGB(191, 175, 160)

Font pairing style: Classic, Sans Serif + Serif
Title font: Fjalla One
Paragraph font: Libre Baskerville
Text color: RGB(42, 46, 47)
Background color: RGB(220, 221, 215)
Additional color(s): RGB(185, 152, 133)

Font pairing style: Classic, Serif + Sans Serif
Title font: Lustria
Paragraph font: Lato
Text color: RGB(245, 240, 236)
Background color: RGB(0, 0, 0)
Additional color(s): RGB(189, 141, 121)

Font pairing style: Classic, Serif + Sans Serif
Title font: Cormorant Garamond
Paragraph font: Proza Libre
Text color: RGB(33, 29, 30)
Background color: RGB(233, 230, 225)
Additional color(s): RGB(165, 174, 183), RGB(211, 169, 153)

Font pairing style: Classic, Slab + Serif
Title font: Oswald
Paragraph font: EB Garamond
Text color: RGB(249, 249, 249)
Background color: RGB(51, 47, 48)
Additional color(s): RGB(128, 132, 141), RGB(179, 180, 184)

Font pairing style: Classic, Serif + Sans Serif
Title font: Libre Baskerville
Paragraph font: Source Sans Pro
Text color: RGB(235, 235, 235)
Background color: RGB(55, 66, 88)
Additional color(s): RGB(173, 185, 201)

Elegant Fonts

Font pairing style: Elegant, Slab + Sans Serif
Title font: Cinzel
Paragraph font: Fauna One
Text color: RGB(219, 204, 181)
Background color: RGB(181, 104, 76)
Additional color(s): RGB(131, 107, 79)

Font pairing style: Elegant, Script + Serif
Title font: Sacramento
Paragraph font: Alice
Text color: RGB(80, 49, 47)
Background color: RGB(219, 204, 181)
Additional color(s): RGB(116, 50, 51), RGB(186, 142, 105)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Yeseva One
Paragraph font: Josefin Sans
Text color: RGB(219, 169, 136)
Background color: RGB(22, 44, 58)
Additional color(s): RGB(217, 124, 80)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Libre Baskerville
Paragraph font: Montserrat
Text color: RGB(27, 59, 70)
Background color: RGB(235, 221, 212)
Additional color(s): RGB(182, 186, 195)

Font pairing style: Elegant, Sans Serif + Sans Serif
Title font: Cardo
Paragraph font: Josefin Sans
Text color: RGB(219, 172, 111)
Background color: RGB(123, 51, 52)
Additional color(s): RGB(133, 88, 57)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Lora
Paragraph font: Roboto 
Text color: RGB(33, 29, 30)
Background color: RGB(233, 230, 225)
Additional color(s): RGB(165, 174, 183), RGB(211, 169, 153)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Spectral
Paragraph font: Karla
Text color: RGB(249, 248, 246)
Background color: RGB(7, 54, 48)
Additional color(s): RGB(219, 199, 174), RGB(238, 225, 216)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Halant
Paragraph font: Nunito Sans
Text color: RGB(209, 202, 194)
Background color: RGB(29, 29, 29)
Additional color(s): RGB(186, 135, 92), RGB(89, 107, 95)

Font pairing style: Elegant, Serif + Sans Serif
Title font: Karla
Paragraph font: Karla
Text color: RGB(85, 85, 83)
Background color: RGB(238, 221, 211)
Additional color(s): RGB(191, 109, 51), RGB(207, 216, 211)

Font pairing style: Elegant, Serif + Serif
Title font: Lora
Paragraph font: Merriweather
Text color: RGB(251, 245, 245)
Background color: RGB(45, 44, 42)
Additional color(s): RGB(205, 137, 124), RGB(243, 228, 223)

Modern Fonts

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Roboto
Paragraph font: Nunito
Text color: RGB(35, 31, 32)
Background color: RGB(173, 142, 121)
Additional color(s): RGB(68, 76, 78), RGB(169, 124, 93)

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Quicksand
Paragraph font: Quicksand
Text color: RGB(15, 12, 19)
Background color: RGB(230, 225, 222)
Additional color(s): RGB(161, 105, 90), RGB(210, 193, 177)

Font pairing style: Modern, Slab + Sans Serif
Title font: Ubuntu
Paragraph font: Open Sans
Text color: RGB(235, 224, 218)
Background color: RGB(60, 53, 43)
Additional color(s): RGB(135, 118, 110), RGB(173, 159, 156)

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Montserrat
Paragraph font: Hind
Text color: RGB(101, 108, 116)
Background color: RGB(238, 237, 232)
Additional color(s): RGB(38, 33, 37), RGB(164, 127, 72)

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Nunito
Paragraph font: Pt Sans
Text color: RGB(236, 232, 231)
Background color: RGB(46, 54, 65)
Additional color(s): RGB(208, 194, 191), RGB(227, 216, 214)

Font pairing style: Modern, Slab + Serif
Title font: Oswald
Paragraph font: Merriweather
Text color: RGB(221, 225, 236)
Background color: RGB(46, 54, 65)
Additional color(s): RGB(77, 82, 88), RGB(184, 190, 204)

Font pairing style: Modern, Sans Serif + Serif
Title font: Montserrat
Paragraph font: Cardo
Text color: RGB(55, 57, 69)
Background color: RGB(220, 221, 225)
Additional color(s): RGB(58, 122, 242), RGB(192, 195, 203)

Font pairing style: Modern, Sans Serif + Serif
Title font: Montserrat
Paragraph font: Crimson Text
Text color: RGB(222, 221, 221)
Background color: RGB(15, 9, 9)
Additional color(s): RGB(234, 17, 11), RGB(184, 184, 184)

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Open Sans
Paragraph font: Open Sans Condensed
Text color: RGB(245, 245, 253)
Background color: RGB(96, 77, 255)
Additional color(s): RGB(184, 190, 204), RGB(245, 245, 253)

Font pairing style: Modern, Sans Serif + Sans Serif
Title font: Nunito
Paragraph font: Nunito
Text color: RGB(253, 191, 45)
Background color: RGB(39, 39, 39)
Additional color(s): RGB(210, 210, 202), RGB(249, 249, 249)

Creative Fonts

Font pairing style: Creative, Slab + Sans Serif
Title font: Arvo
Paragraph font: Lato
Text color: RGB(3, 5, 4)
Background color: RGB(151, 235, 212)
Additional color(s): RGB(176, 201, 191), RGB(238, 238, 238)

Font pairing style: Creative, Serif + Sans Serif
Title font: Abril Fatface
Paragraph font: Poppins
Text color: RGB(37, 31, 84)
Background color: RGB(209, 200, 255)
Additional color(s): RGB(111, 17, 244), RGB(172, 48, 241)

Font pairing style: Creative, Serif + Sans Serif
Title font: Playfair Display
Paragraph font: Source Sans Pro
Text color: RGB(251, 233, 234)
Background color: RGB(251, 74, 84)
Additional color(s): RGB(247, 175, 170), RGB(33, 29, 30)

Font pairing style: Creative, Sans Serif + Serif
Title font: Karla
Paragraph font: Inconsolata
Text color: RGB(232, 233, 240)
Background color: RGB(48, 48, 75)
Additional color(s): RGB(194, 87, 225), RGB(148, 159, 224)

Font pairing style: Creative, Slab + Serif
Title font: Ultra
Paragraph font: Slabo 27px
Text color: RGB(0, 0, 0)
Background color: RGB(250, 201, 187)
Additional color(s): RGB(216, 217, 219), RGB(247, 247, 247)

Font pairing style: Creative, Serif + Serif
Title font: Nixie One
Paragraph font: Ledger
Text color: RGB(14, 21, 21)
Background color: RGB(236, 238, 240)
Additional color(s): RGB(124, 124, 125), RGB(148, 150, 152)

Font pairing style: Creative, Serif + Sans Serif
Title font: Stint Ultra Expanded
Paragraph font: Pontano Sans
Text color: RGB(245, 255, 254)
Background color: RGB(73, 192, 212)
Additional color(s): RGB(246, 120, 95), RGB(247, 168, 99)

Font pairing style: Creative, Sans Serif + Sans Serif
Title font: Amatic SC
Paragraph font: Andika
Text color: RGB(248, 214, 184)
Background color: RGB(119, 56, 25)
Additional color(s): RGB(198, 183, 214), RGB(219, 227, 212)

Font pairing style: Creative, Sans Serif + Serif
Title font: Unica One
Paragraph font: Crimson Text
Text color: RGB(249, 250, 251)
Background color: RGB(46, 46, 50)
Additional color(s): RGB(69, 140, 249), RGB(132, 132, 132)

Font pairing style: Creative, Sans Serif + Sans Serif
Title font: Philosopher
Paragraph font: Muli
Text color: RGB(249, 250, 251)
Background color: RGB(254, 98, 57)
Additional color(s): RGB(26, 25, 23), RGB(228, 221, 211)

Minimalist Fonts

Font pairing style: Minimalist, Sans Serif + Serif
Title font: Source Sans Pro
Paragraph font: Source Serif Pro
Text color: RGB(240, 228, 216)
Background color: RGB(45, 45, 43)
Additional color(s): RGB(240, 228, 216), RGB(246, 245, 240)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Fjalla One
Paragraph font: Cantarell
Text color: RGB(255, 255, 255)
Background color: RGB(176, 168, 157)
Additional color(s): RGB(195, 186, 171), RGB(237, 236, 232)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Work Sans
Paragraph font: Open Sans
Text color: RGB(230, 230, 231)
Background color: RGB(88, 74, 68)
Additional color(s): RGB(140, 117, 105), RGB(147, 146, 147)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Hind
Paragraph font: Open Sans
Text color: RGB(174, 144, 115)
Background color: RGB(243, 242, 242)
Additional color(s): RGB(218, 194, 167), RGB(186, 164, 149)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Nunito
Paragraph font: Open Sans
Text color: RGB(0, 0, 0)
Background color: RGB(251, 242, 233)
Additional color(s): RGB(250, 250, 250)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Oxygen
Paragraph font: Source Sans Pro
Text color: RGB(249, 249, 249)
Background color: RGB(128, 132, 141)
Additional color(s): RGB(51, 47, 48), RGB(179, 180, 184)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: PT Sans
Paragraph font: Cabin
Text color: RGB(234, 236, 248)
Background color: RGB(205, 180, 150)
Additional color(s): RGB(210, 228, 250), RGB(237, 234, 229)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Roboto Condensed
Paragraph font: Cabin
Text color: RGB(255, 255, 255)
Background color: RGB(179, 180, 184)
Additional color(s): RGB(210, 210, 210), RGB(227, 228, 230)

Font pairing style: Minimalist, Sans Serif + Sans Serif
Title font: Raleway
Paragraph font: Open Sans
Text color: RGB(249, 249, 249)
Background color: RGB(45, 45, 43)
Additional color(s): RGB(240, 228, 216), RGB(249, 249, 249)

Font pairing style: Minimalist, Sans Serif + Serif
Title font: Roboto
Paragraph font: Lora
Text color: RGB(179, 180, 184)
Background color: RGB(128, 132, 141)
Additional color(s): RGB(249, 249, 249)

Summary

We hope the font combinations and color schemes shared above will help inspire your next website project. To create additional options, feel free to use the PageCloud Editor to mix and match fonts and colors until you find the perfect fit for your brand.

You may also like: The easy way to build a professional website with PageCloud

Written by

Alexandra Mercier

Enjoyed the read?

Join our monthly newsletter for helpful tips on SEO, Web design, and more!