Google Font “Merriweather” Is not showing up in Chrome.?

Question

At the top of my code I have:

< link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >

And in my CSS I have:

font-family: 'Merriweather', ;

But it is not showing up. I'm not sure what the reasoning is. It seems so simple and yet nothing is working.

Any help would be appreciated.

Here is the top of my HTML:

 <link rel = "stylesheet"
   type = "text/css"
   href = "stylesheet.css" />

<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">

<head>

<title>Jesse | Personal Chef </title>

  <meta charset="UTF-8">
  <meta name="description" content="Jesse Personal Chef">
  <meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
  <meta name="author" content="Cal & Jen T.">
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

This is my CSS, saved in as stylesheet.css:

<style>

/* HEADERS ~~~~~~~~~~ */

    h1 {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 2.7em;
        color: 000;
        font-weight: 500;
        letter-spacing: 2%;
        line-height: 40px;
        padding-bottom: -100px;
        margin: 2%;

    }

     .subtitle {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 1.04em;
        color: 000;
        font-weight: regular;
        margin: 1;
        line-height: 1px;
        padding-bottom: 60px;

    }


</style>

Thank you

You might need to provide more code, like your CSS Selector, as we dont know if this could work with the code provided. Try showing all code necessary to replicate the problem. — somethinghere

Rob Moll Rob Moll · Accepted Answer · 2020-03-01T17:24:19

One little fix needed:

Change this:

font-family: 'Merriweather', ;

To this:

font-family: 'Merriweather', serif;

The serif portion is the fail-over font in case it can't find Merriweather.

Test it in this snippet:

<html>

<head>
  <link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
  <style>
    div {
      font-family: Merriweather, serif;
    }
  </style>
</head>

<body>
  <div>Test</div>
</body>

</html>

You can also just apply the font-family style to the <body> tag and all child elements will inherit that font-family.

Google Font “Merriweather” Is not showing up in Chrome.?

2 Answers