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

Question

[Illia T]

Может я что-то делаю не так? Что-то долго вожусь, нужно мнение стороннего человека.
Шрифты подтягиваются из _fonts.scss

@font-face { 
  font-family: 'FiraSans-Regular'; 
  src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
  src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg'); 
  font-weight: 400; 
}

body p {
	color: red;
	font-family: 'FiraSans-Regular';
	font-size: 24px;
}

Comments

[Rustam Bainazarov]

А зачем вы подключаете SVG-файл шрифта, когда шрифты этого формата признаны устаревшими. И поддержка оных есть только в Safari (и её планируют выпилить в следующей версии).

Нужно 3 формата — TTF, WOFF, WOFF2. Эти форматы покрывают всё браузеры. А браузер всё равно выберет и скачает только тот, что он поддерживает, т. е. он скачает только один файл.

Answer 1

[Сергей delphinpro]

Ошибка в наличии двух src

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Нужно указывать через запятую

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
     url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Два src используется для поддержки древнего IE (уж не помню какой версия).

В вашем случае подключается svg шрифт, который понимает только Safari.
Как вам уже сказали в комментах — svg формат не следует использовать вообще.

И попробуйте использовать для подготовки шрифтов специализированные сервисы типа https://www.fontsquirrel.com/tools/webfont-generator
Они вам и шрифтов нагенерят в нужных форматах и css файлик создадут для подключания.

Comments

[Illia T]

Спасибо за помощь)

Answer 2

[Dymok]

1) ошибка в пути, можно проверить в консоли
2) проверяете на кириллице, а её в шрифте нет, можно проверить на латинских буквах

Comments

[Illia T]

В пути ошибки нет, проверял визуально.
А латиница ничего не даёт.
Шрифт по линку на гугл работает.

[Dymok]

illiatovpeko, во вкладке network шрифт нормально загружается, 200 код?