谷歌字体“Merriweather”没有显示在 Chrome 中。？

Question

At the top of my code I have:在我的代码顶部，我有：

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

And in my CSS I have:在我的 CSS 中，我有：

font-family: 'Merriweather', ; 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:这是我的 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:这是我的 CSS，保存为 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谢谢

Answer 1

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. serif部分是故障转移字体，以防它找不到 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.您也可以将font-family样式应用于<body>标签，所有子元素都将继承该 font-family。

Answer 2

Check fonts link:检查字体链接：
- if you use @font-face rule check link to the folder with fonts and be sure that font files is present in this folder, also check fonts name in @font-face rule and in font-family they must be equal;如果您使用@font-face规则检查带有字体的文件夹的链接，并确保该文件夹中存在字体文件，还要检查@font-face规则和font-family字体名称，它们必须相等；
- if you use CDN - check the link to the CDN;如果您使用 CDN - 检查 CDN 的链接；
Open Dev Tools in your browser(Ctrl(Command) + Shift + I) and in the tab Network check whether your font is downloaded or not: https://prnt.sc/r9x8ab ;在浏览器中打开开发工具（Ctrl（Command）+ Shift + I）并在选项卡网络中检查您的字体是否已下载： https : //prnt.sc/r9x8ab ;

谷歌字体“Merriweather”没有显示在 Chrome 中。？

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-03-01 17:24:19

解决方案2
-1 2020-03-01 17:16:07

谷歌字体“Merriweather”没有显示在 Chrome 中。？

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-03-01 17:24:19

解决方案2 -1 2020-03-01 17:16:07

解决方案1
0 已采纳 2020-03-01 17:24:19

解决方案2
-1 2020-03-01 17:16:07