Почему скаченный шрифт не подключается?

Question

[shib]

Добрый день!

Задание : Необходимо стилизовать надпись
Процесс реализации:
Скачайте архив с исходными файлами задания- скачен
Установите шрифт Lobster-Regular.ttf в вашу операционную систему-установлен
Измерьте в макете и установите размер текста для элемента с классом container.
Измерьте в макете и установите цвет текста для элемента с классом container.
Измерьте в макете и установите междустрочное расстояние для элемента p.
Подключите шрифт lobster, используя директиву font-face. В качестве пути (src) используйте ссылку на файл, в настройках укажите font-family: lobster, font-weight: 400 и font-style: normal.
Установите font-family: lobster для элемента с классом container.
Убедитесь, что результат соответствует описанию. Для этого перейдите в режим FullPage (скриншот). Если режим FullPage View выдал ошибку, вам нужно подтвердить свою учётную запись в CodePen, пройдя по ссылке из письма от CodePen, тогда всё должно заработать корректно.
Не нужно вносить другие правки в CSS или писать дополнительные правила, кроме тех, что предусмотрены заданием.

Мое выполнение задания :

@font-face {
font-family: "Lobster-Regular.ttf", sans-serif;
src: url('https://netology-code.github.io/html-2-homeworks/f...');
font-weight: 400;
font-style: normal;
}

.container {
font-family: "lobster", sans-serif;
color: #ffffff;
font-size: 40px;
line-height: 56px;
}

По итогу шрифт загружен в операционную систему, в ворд файле можно пользоваться шрифтом. Но в CSS никак не подгружается шрифт. Так же с Google fonts шрифт не подгрузился в CSS.

Comments

[VoidVolker]

shib https://qna.habr.com/help/rules#3.8

[Максим]

@font-face {
font-family: "Lobster-Regular.ttf", sans-serif;  -- это просто название то которое вы указываете в font-family у container и sans-serif через запятую писать не надо  
src: url('https://netology-code.github.io/html-2-homeworks/f...'); ссылка ведёт вообще на другой на другой шрифт
font-weight: 400;
font-style: normal;
}

должно быть вот так

@font-face {
font-family: "lobster";  
src: url('здесь надо ссылку на правильный файл шрифта ');
font-weight: 400;
font-style: normal;
}

.container {
font-family: "lobster", sans-serif;
color: #ffffff;
font-size: 40px;
line-height: 56px;
}

[shib]

Максим, Максим спасибо большое за ответ.

У меня сразу сработал шрифт, когда я исправила в СSS:

@font-face {
font-family: "Lobster-Regular.ttf"

на

@font-face {
font-family: "lobster;

Спасибо за помощь в таком простом вопросе! Глупая ошибка конечно.

Answer 1

[Александр]

То есть вас не смущает что "Lobster-Regular.ttf" это не "lobster"?
Исправте согласно документации.

Comments

[shib]

Представляете, такие глупости тоже бывают. Спасибо за ответ, все исправлено и заработал шрифт.

[Refguser]

shib, если ответ помог отметь его решением.

Answer 2

[TolyaG]

.container {
font-family: "lobster", sans-serif;

тут ошибка