Не удается добавить собственный шрифт в шаблон сайта HTML / CSS

Question

Итак, я получил шаблон от bootstrap и работал над ним несколько дней .. (Я новичок в HTML / CSS). Я не могу добавить собственный шрифт для моей жизни. Мои шрифты помещены в папку под названием «шрифты». Мои css файлы разделены на файл 'main. css' и файл 'fonts. css'. Любая помощь будет оценена.

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">

/*In MAIN.CSS file 
====================*/

.home-content h1 {
    font-family: "sharpgrotesk-bold", sans-serif;
    color: #fff;
    font-size: 6rem;
    line-height: 1.35;
    margin-top: 0;
}

/*In FONTS.CSS file 
====================*/

@font-face {
    font-family: "sharpgrotesk-bold";
    src: url("fonts/SharpGrotesk-Bold20.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

Answer 1

Проверьте в вашем браузере инструменты разработчика на 404 ошибки. Вы, вероятно, увидите ошибку при загрузке fonts/SharpGrotesk-Bold, которая скажет вам, по какому пути ваш браузер пытается выбрать.

Обратите внимание, что url() в css требует, чтобы вы передавали относительные пути в сам файл css (шрифты. css), если только они не начинаются с "/" в в каком случае они являются абсолютными.

Хорошей практикой является использование относительных путей, потому что таким образом вам не нужно менять свои URL при развертывании в рабочей среде (и, возможно, изменить местоположение root всех ваших файлов stati c на CDN).

Таким образом, ваш текущий url () предполагает, что каталог "fonts" находится в том же каталоге, что и шрифты. css (внутри вашей папки css). Если ваш каталог «fonts» находится на том же уровне, что и ваш каталог css, то вам нужно go на одну папку вверх:

src: url("../fonts/SharpGrotesk-Bold20.otf") format("opentype");