Font Pairs

Explore 105 carefully curated font combinations. Each pair is designed to create harmony between headings and body text.

Showing all 105 font pairs

Inter & Roboto

A beautiful combination of Inter for headings and Roboto for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Roboto, sans-serif;

Inter & Open Sans

A beautiful combination of Inter for headings and Open Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Open Sans, sans-serif;

Inter & Lato

A beautiful combination of Inter for headings and Lato for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lato:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Lato, sans-serif;

Inter & Montserrat

A beautiful combination of Inter for headings and Montserrat for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Montserrat, sans-serif;

Inter & Poppins

A beautiful combination of Inter for headings and Poppins for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Poppins, sans-serif;

Inter & Raleway

A beautiful combination of Inter for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Inter & Playfair Display

A beautiful combination of Inter for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Inter & Merriweather

A beautiful combination of Inter for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Inter & Source Sans Pro

A beautiful combination of Inter for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Inter & Nunito

A beautiful combination of Inter for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Inter & Work Sans

A beautiful combination of Inter for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Inter & DM Sans

A beautiful combination of Inter for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Inter & Space Grotesk

A beautiful combination of Inter for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Inter & Plus Jakarta Sans

A beautiful combination of Inter for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Inter, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Roboto & Open Sans

A beautiful combination of Roboto for headings and Open Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Open Sans, sans-serif;

Roboto & Lato

A beautiful combination of Roboto for headings and Lato for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Lato:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Lato, sans-serif;

Roboto & Montserrat

A beautiful combination of Roboto for headings and Montserrat for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Montserrat, sans-serif;

Roboto & Poppins

A beautiful combination of Roboto for headings and Poppins for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Poppins, sans-serif;

Roboto & Raleway

A beautiful combination of Roboto for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Roboto & Playfair Display

A beautiful combination of Roboto for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Roboto & Merriweather

A beautiful combination of Roboto for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Roboto & Source Sans Pro

A beautiful combination of Roboto for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Roboto & Nunito

A beautiful combination of Roboto for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Roboto & Work Sans

A beautiful combination of Roboto for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Roboto & DM Sans

A beautiful combination of Roboto for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Roboto & Space Grotesk

A beautiful combination of Roboto for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Roboto & Plus Jakarta Sans

A beautiful combination of Roboto for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Roboto, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Open Sans & Lato

A beautiful combination of Open Sans for headings and Lato for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Lato:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Lato, sans-serif;

Open Sans & Montserrat

A beautiful combination of Open Sans for headings and Montserrat for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Montserrat, sans-serif;

Open Sans & Poppins

A beautiful combination of Open Sans for headings and Poppins for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Poppins, sans-serif;

Open Sans & Raleway

A beautiful combination of Open Sans for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Open Sans & Playfair Display

A beautiful combination of Open Sans for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Open Sans & Merriweather

A beautiful combination of Open Sans for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Open Sans & Source Sans Pro

A beautiful combination of Open Sans for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Open Sans & Nunito

A beautiful combination of Open Sans for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Open Sans & Work Sans

A beautiful combination of Open Sans for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Open Sans & DM Sans

A beautiful combination of Open Sans for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Open Sans & Space Grotesk

A beautiful combination of Open Sans for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Open Sans & Plus Jakarta Sans

A beautiful combination of Open Sans for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Open Sans, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Lato & Montserrat

A beautiful combination of Lato for headings and Montserrat for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Montserrat, sans-serif;

Lato & Poppins

A beautiful combination of Lato for headings and Poppins for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Poppins, sans-serif;

Lato & Raleway

A beautiful combination of Lato for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Lato & Playfair Display

A beautiful combination of Lato for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Lato & Merriweather

A beautiful combination of Lato for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Lato & Source Sans Pro

A beautiful combination of Lato for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Lato & Nunito

A beautiful combination of Lato for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Lato & Work Sans

A beautiful combination of Lato for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Lato & DM Sans

A beautiful combination of Lato for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Lato & Space Grotesk

A beautiful combination of Lato for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Lato & Plus Jakarta Sans

A beautiful combination of Lato for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Lato, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Montserrat & Poppins

A beautiful combination of Montserrat for headings and Poppins for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Poppins, sans-serif;

Montserrat & Raleway

A beautiful combination of Montserrat for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Montserrat & Playfair Display

A beautiful combination of Montserrat for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Montserrat & Merriweather

A beautiful combination of Montserrat for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Montserrat & Source Sans Pro

A beautiful combination of Montserrat for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Montserrat & Nunito

A beautiful combination of Montserrat for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Montserrat & Work Sans

A beautiful combination of Montserrat for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Montserrat & DM Sans

A beautiful combination of Montserrat for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Montserrat & Space Grotesk

A beautiful combination of Montserrat for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Montserrat & Plus Jakarta Sans

A beautiful combination of Montserrat for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Montserrat, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Poppins & Raleway

A beautiful combination of Poppins for headings and Raleway for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Raleway:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Raleway, sans-serif;

Poppins & Playfair Display

A beautiful combination of Poppins for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Poppins & Merriweather

A beautiful combination of Poppins for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Poppins & Source Sans Pro

A beautiful combination of Poppins for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Poppins & Nunito

A beautiful combination of Poppins for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Poppins & Work Sans

A beautiful combination of Poppins for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Poppins & DM Sans

A beautiful combination of Poppins for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Poppins & Space Grotesk

A beautiful combination of Poppins for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Poppins & Plus Jakarta Sans

A beautiful combination of Poppins for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Poppins, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Raleway & Playfair Display

A beautiful combination of Raleway for headings and Playfair Display for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Playfair+Display:wght@400;600;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Playfair Display, serif;

Raleway & Merriweather

A beautiful combination of Raleway for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Merriweather, serif;

Raleway & Source Sans Pro

A beautiful combination of Raleway for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Raleway & Nunito

A beautiful combination of Raleway for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Raleway & Work Sans

A beautiful combination of Raleway for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Raleway & DM Sans

A beautiful combination of Raleway for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Raleway & Space Grotesk

A beautiful combination of Raleway for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Raleway & Plus Jakarta Sans

A beautiful combination of Raleway for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Raleway, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Playfair Display & Merriweather

A beautiful combination of Playfair Display for headings and Merriweather for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Merriweather, serif;

Playfair Display & Source Sans Pro

A beautiful combination of Playfair Display for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Playfair Display & Nunito

A beautiful combination of Playfair Display for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Nunito, sans-serif;

Playfair Display & Work Sans

A beautiful combination of Playfair Display for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Playfair Display & DM Sans

A beautiful combination of Playfair Display for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Playfair Display & Space Grotesk

A beautiful combination of Playfair Display for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Playfair Display & Plus Jakarta Sans

A beautiful combination of Playfair Display for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Playfair Display, serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Merriweather & Source Sans Pro

A beautiful combination of Merriweather for headings and Source Sans Pro for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: Source Sans Pro, sans-serif;

Merriweather & Nunito

A beautiful combination of Merriweather for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: Nunito, sans-serif;

Merriweather & Work Sans

A beautiful combination of Merriweather for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Merriweather & DM Sans

A beautiful combination of Merriweather for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Merriweather & Space Grotesk

A beautiful combination of Merriweather for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Merriweather & Plus Jakarta Sans

A beautiful combination of Merriweather for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Merriweather, serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Source Sans Pro & Nunito

A beautiful combination of Source Sans Pro for headings and Nunito for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Source Sans Pro, sans-serif;

/* Body Font */
font-family: Nunito, sans-serif;

Source Sans Pro & Work Sans

A beautiful combination of Source Sans Pro for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Source Sans Pro, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Source Sans Pro & DM Sans

A beautiful combination of Source Sans Pro for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Source Sans Pro, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Source Sans Pro & Space Grotesk

A beautiful combination of Source Sans Pro for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Source Sans Pro, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Source Sans Pro & Plus Jakarta Sans

A beautiful combination of Source Sans Pro for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Source Sans Pro, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Nunito & Work Sans

A beautiful combination of Nunito for headings and Work Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Nunito, sans-serif;

/* Body Font */
font-family: Work Sans, sans-serif;

Nunito & DM Sans

A beautiful combination of Nunito for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Nunito, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Nunito & Space Grotesk

A beautiful combination of Nunito for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Nunito, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Nunito & Plus Jakarta Sans

A beautiful combination of Nunito for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Nunito, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Work Sans & DM Sans

A beautiful combination of Work Sans for headings and DM Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Work Sans, sans-serif;

/* Body Font */
font-family: DM Sans, sans-serif;

Work Sans & Space Grotesk

A beautiful combination of Work Sans for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Work Sans, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

Work Sans & Plus Jakarta Sans

A beautiful combination of Work Sans for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Work Sans, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

DM Sans & Space Grotesk

A beautiful combination of DM Sans for headings and Space Grotesk for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: DM Sans, sans-serif;

/* Body Font */
font-family: Space Grotesk, sans-serif;

DM Sans & Plus Jakarta Sans

A beautiful combination of DM Sans for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: DM Sans, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;

Space Grotesk & Plus Jakarta Sans

A beautiful combination of Space Grotesk for headings and Plus Jakarta Sans for body text.

Simulate

Font Configuration

HTML (add to <head>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

CSS:

/* Title Font (Heading) */
font-family: Space Grotesk, sans-serif;

/* Body Font */
font-family: Plus Jakarta Sans, sans-serif;