Как отлаживать проблемы с шрифтом?

У меня есть следующий код CSS:

// theMixPlainSemiBold @font-face { font-family: 'theMixPlainSemiBold'; src: url('/css/fonts/... .eot'); src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'), url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'), url('/css/fonts/... .woff') format('woff'), url('/css/fonts/... .ttf') format('truetype'); font-weight: normal; font-style: normal; } 

Я ожидаю, что это создаст новое семейство шрифтов, называемое theMixPlainSemiBold .

После импорта этого шрифта я делаю:

 .box { ... font-family: 'theMixPlainSemiBold', sans-serif; ... } 

У меня есть class box , у которого есть семейство theMixPlainSemiBold .

Когда я открываю страницу, я вижу sans-serif в .box .

В чем проблема? То же самое происходит и с другими локальными веб-шрифтами, в то время как он хорошо работает с Google Fonts.

Как я могу отлаживать проблемы с шрифтом? Я не вижу никаких ошибок / предупреждений в инструментах разработчика. Он выглядит так, как шрифт не загружается из локальных файлов …

Хотя это не настоящий ответ на этот вопрос, я сам нашел проблему. Double-slashes ( // ) недействительны для комментариев CSS! Смотрите этот скриншот из инструментов разработчика:

Итак, мой код:

 /* theMixPlainSemiBold */ @font-face { font-family: 'theMixPlainSemiBold'; src: url('/css/fonts/... .eot'); src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'), url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'), url('/css/fonts/... .woff') format('woff'), url('/css/fonts/... .ttf') format('truetype'); font-weight: normal; font-style: normal; } 

Шрифты будут правильно загружены.

 @font-face { font-family: anyname; src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf'); font-weight: normal; font-style: normal; } 

затем используйте его следующим образом:

 #sample{ font-family:anyname; } 

вы можете использовать любое имя в нем. / важно в URL-адресе, потому что он показывает, что он находится внутри папки.

Во-первых, использование однозначного пользовательского имени font-family может помочь отладке, поскольку это предотвратит запуск и использование ваших локальных шрифтов.

Затем, хотя это не ограничивается проблемами @font-face , консоль инструментов разработчика Firefox, безусловно, может помочь отладить проблемы CSS.

В вашем случае он обнаружил бы плохие комментарии:

 Selector expected. Ruleset ignored due to bad selector. yourfile.css:23 

В моем случае из-за плохого редактирования после copypasta у меня была конечная запятая вместо точки с запятой, что помешало Firefox загрузить шрифт:

 @font-face{ font-family: SuperFont; src: url('../fonts/Superfont.ttf'), } 

Консоль придумала:

 Error in parsing value for 'src'. Skipped to next declaration. myfile:18 

Или консоль может жаловаться:

 downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf 

(Это, как правило, соответствует 404 URL-адресу шрифта, проклятым опечаткам …)

Если вы прототипируете и просматриваете только что созданные HTML-файлы в виде статических локальных файлов, шрифты могут не загружаться. (Из-за некоторых междоменных политик браузером?)

Поэтому вам нужно будет запросить ваш html через (локальный) сервер.

проверьте свою ссылку на источник

 @font-face { font-family: 'theMixPlainSemiBold'; src: url('../css/fonts/.eot'); src: url('../css/fonts/.eot?#iefix') format('embedded-opentype'), url('../css/fonts/.woff') format('woff'), url('../css/fonts/.ttf') format('truetype'), url('../css/fonts/.svg#open_sanslight') format('svg'); font-weight: normal; font-style: normal; } 

возможно, вы забыли о ../ потому что если шрифты из Google работают нормально, поэтому ваша ссылка (источник), ваш шрифт должен быть неправильным