Sign up
web design
Top 50 Google Font Pairings [Handpicked by Pro Designers]
Philip Westfall, January 10, 2023
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
/web/google-font-pairing-playfair-display-source-sans-pro-gb75d.png)
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)
/web/google-font-pairing-playfair-display-alice-v30a4.png)
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)
/web/google-font-pairing-quattrocento-quattrocento-ne687.png)
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)
/web/google-font-pairing-quattrocento-fanwood-text-w83f1.png)
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)
/web/google-font-pairing-oswald-quattrocento-q0b4d.png)
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)
/web/google-font-pairing-fjalla-one-libre-baskerville-f926b.png)
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)
/web/google-font-pairing-lustria-lato-9cd0c.png)
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)
/web/google-font-pairing-cormorant-garamond-proza-libre-g72fd.png)
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)
/web/google-font-pairing-oswald-eb-garamond-oa2b5.png)
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)
/web/google-font-pairing-libre-baskerville-source-sans-pro-pacdb.png)
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)
/web/pagecloud-blog-ad-2022-1-u1526.png)
Elegant Fonts
/web/google-font-pairing-cinzel-fauna-one-c89ff.png)
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)
/web/google-font-pairing-sacramento-alice-jd4bd.png)
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)
/web/google-font-pairing-yeseva-one-josefin-sans-j580e.png)
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)
/web/google-font-pairing-libre-baskerville-montserrat-u2019.png)
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)
/web/google-font-pairing-cardo-josefin-sans-u9b6b.png)
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)
/web/google-font-pairing-lora-roboto-af70d.png)
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)
/web/google-font-pairing-spectral-karla-k0aa8.png)
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)
/web/google-font-pairing-halant-nunito-sans-kea57.png)
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)
/web/google-font-pairing-karla-karla-e464d.png)
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)
/web/google-font-pairing-lora-merriweather-e3a94.png)
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
/web/google-font-pairing-roboto-nunito-bd1c5.png)
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)
/web/google-font-pairing-quicksand-quicksand-w464d.png)
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)
/web/google-font-pairing-ubuntu-bold-open-sans-i8306.png)
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)
/web/google-font-pairing-montserrat-hind-ffa16.png)
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)
/web/Screen_Shot_2020-03-06_at_4.07.55_PM-e4f07.png)
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)
/web/google-font-pairing-oswald-merriweather-rd2a2.png)
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)
/web/google-font-pairing-montserrat-cardo-mb91d.png)
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)
/web/google-font-pairing-montserrat-crimson-text-hde18.png)
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)
/web/google-font-pairing-open-sans-open-sans-condensed-420dc.png)
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)
/web/google-font-pairing-nunito-nunito-wd204.png)
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
/web/google-font-pairing-arvo-lato-se577.png)
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)
/web/google-font-pairing-abril-fatface-poppins-cafa1.png)
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)
/web/google-font-pairing-playfair-display-italic-source-sans-pro-gf4f6.png)
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)
/web/google-font-pairing-karla-inconsolata-92cac.png)
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)
/web/google-font-pairing-ultra-slabo-27px-l05c9.png)
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)
/web/google-font-pairings-nixie-one-ledger-qa325.png)
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)
/web/google-font-pairings-stint-ultra-expanded-pontano-sans-mf934.png)
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)
/web/google-font-pairing-amatic-sc-andika-nc434.png)
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)
/web/google-font-pairings-unica-one-crimson-text-p1bde.png)
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)
/web/google-font-pairing-philosopher-muli-j4080.png)
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
/web/google-font-pairing-source-sans-pro-source-serif-pro-u8e3d.png)
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)
/web/google-font-pairing-fjalla-one-cantarell-v82f2.png)
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)
/web/google-font-pairing-work-sans-open-sans-g4a2d.png)
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)
/web/google-font-pairing-hind-open-sans-q13eb.png)
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)
/web/google-font-pairing-nunito-open-sans-qcd61.png)
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)
/web/google-font-pairing-oxygen-source-sans-pro-fb4fc.png)
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)
/web/google-font-pairing-pt-sans-cabin-hbd86.png)
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)
/web/google-font-pairing-roboto-condensed-cabin-l1037.png)
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)
/web/google-font-pairing-raleway-open-sans-c0d00.png)
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)
/web/google-font-pairing-roboto-lora-k939e.png)
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.
Pagecloud now offers site-wide colors! Allowing you to create, save, and update your site colors in just a few clicks. To learn more about site-wide colors, check out this blog post or sign up for free!
You may also like: The easy way to build a professional website with Pagecloud
/web/best-google-font-pairings-t8e2d.png&description=)
Create your no-code landing page, website, or online store in no time.
Publish your homepage for free, no credit card required.
