illiatovpeko
@illiatovpeko
Занимаюсь самообразованием в области WebDev

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

Может я что-то делаю не так? Что-то долго вожусь, нужно мнение стороннего человека.
Шрифты подтягиваются из _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;
}
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 2
UnluckySerivelha
@UnluckySerivelha
1) ошибка в пути, можно проверить в консоли
2) проверяете на кириллице, а её в шрифте нет, можно проверить на латинских буквах
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Ошибка в наличии двух 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 файлик создадут для подключания.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы