Google字体显示不一致

Question

第一次张贴，长期潜伏。确实可以在此问题上使用一些帮助。因此，我在建立此网站时使用了Cormorant Garamond和Roboto Slab作为我的字体。唯一的问题是它们仅显示在标题中，即使我指定了要在特定CSS标记中使用的字体，它也不会显示。

我想首先展示我正在使用的HTML和CSS，以确保它不是一个简单的错误。

h2 {
  font-family: 'Cormorant Garamond' serif;
  padding-bottom: 50px;
}

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Roboto+Slab" rel="stylesheet">
<img src="https://picsum.photos/200"/>
<h2>Here is a Heading</h2>

这是供参考的屏幕截图

感谢您的帮助！

Answer 1

只需在CSS的,部分之前添加一个serif。

这是工作代码：

h2 {
  font-family: 'Cormorant Garamond', serif;
}

h3 {
  font-family: 'Roboto Slab', serif;
}

.Card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: pink
}

img {
  width: 100vh;
  height: auto
}

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Roboto+Slab" rel="stylesheet">
<div class="Card">
  <img src="https://picsum.photos/200?image=0" />
  <h2>Jester</h2>
  <h3>Prints available upon request.</h3>
</div>

希望有帮助。

和平。

Answer 2

您需要为每个标签指定不同的字体

h2 {
  font-family: 'Cormorant Garamond', serif;
}

h3 {
  font-family: 'Roboto Slab', serif;
}

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Roboto+Slab" rel="stylesheet">


<h2>This is Cormorant Garamond font</h2>

<h3>This is Roboto Slab font</h3>