Пользовательский шрифт не загружается, скопированный файл CSS из fontmaker тоже, нет результата

Я пытался импортировать пользовательский шрифт в мой HTML. Я загрузил пакет шрифтов из FontSquirrel.

Когда я проверяю свои шрифты на своей странице с помощью инструментов разработчика, он говорит, что 3 шрифта были импортированы, TTF, WOFF и WOFF2, но когда я нажимаю на них, они показывают только обычный стиль шрифта.

Это мой CSS, я добавил src URL (но без ссылки src он также не работает). Я загрузил комплект, распаковал его на карте и удалил zip-файл.

@font-face   {

font-family: 'moon_flower_boldregular';
src: url('C:UsersM de WitteDesktophtmlaboutmewebfontkit')
src: url('moon_flower_bold-webfont.eot');
src: url('moon_flower_bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('moon_flower_bold-webfont.woff2') format('woff2'),
     url('moon_flower_bold-webfont.woff') format('woff'),
     url('moon_flower_bold-webfont.ttf') format('truetype'),
     url('moon_flower_bold-webfont.svg#moon_flower_boldregular') 

format('svg');
    font-weight: normal;
    font-style: normal;
}


p  {

  font-family: moon_flower_boldregular;
  font-size: 30px;

}

Надеюсь, кто-нибудь скажет, что я делаю неправильно.

Спасибо.

3 ответа

  1. Проверьте источник url косая черта противоположны

    ваш код:

    src: url('C:\Users\M de Witte\Desktop\html\aboutme\webfontkit')

    должен быть:

    src: url('C:/Users/M de Witte/Desktop/html/aboutme/webfontkit')

    а также избежать некоторых пробелов в источниках /M de Witte/удалить пространство

    Я думаю, что это решит вашу проблему.

  2. Используйте относительный путь. Например. если ваш файл css находится в cssпапке и шрифты находятся в fontsпапке, путь это:
    url('../fonts/moon_flower_bold-webfont.eot').
    Обратите внимание, что вы должны определить этот путь для всех файлов шрифтов, а не только для первого. И будьте осторожны с точками с запятой:

    @font-face   {
    
        font-family: 'moon_flower_boldregular';
        src: url('../fonts/moon_flower_bold-webfont.eot');
        src: url('../fonts/moon_flower_bold-webfont.eot');
        src: url('../fonts/moon_flower_bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/moon_flower_bold-webfont.woff2') format('woff2'),
             url('../fonts/moon_flower_bold-webfont.woff') format('woff'),
             url('../fonts/moon_flower_bold-webfont.ttf') format('truetype'),
             url('../fonts/moon_flower_bold-webfont.svg#moon_flower_boldregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    
  3. По какой-то причине мой путь был неправильно связан.

    Я снова проверил инструменты разработчика на f12, и проверил мои шрифты, и увидел вдруг 3 ошибки, где он показал, что шрифты не могут быть найдены. Я поместил их в мою предыдущую подкапсулу (aboutme), и это сработало.

    Спасибо за ответы люди, этот сайт является удивительным.