Шрифты Google отображаются непоследовательно

первый постер, долгое время скрывался. Не могли бы действительно помочь в этом вопросе. Итак, я создаю этот веб-сайт, где в качестве шрифтов использую 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>

вот скриншот для справки Шрифты Google отображаются непоследовательно

Любая помощь приветствуется!

где ваш html??.. Пожалуйста, создайте его фрагмент кода

— 19.02.2019 05:42

css fonts

19.02.2019 05:15

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 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>

19.02.2019 06:04

Просто добавьте , перед частью serif в свой css.

Вот рабочий код:

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>

Надеюсь, поможет.

Мир ?.

19.02.2019 06:05