При подключении шрифтов отображается только один шрифт

Рейтинг: 0Ответов: 2Опубликовано: 30.01.2023

Файл fonts.sass

@font-face
font-family: 'ABC Monument Grotesk Mono'
src: url('./fonts/ABCMonumentGroteskMono-Regular.eot')
src: url('./fonts/ABCMonumentGroteskMono-Regular.eot?#iefix') format('embedded-opentype'),
url:('./fonts/ABCMonumentGroteskMono-Regular.woff2') format('woff2'),
url:('./fonts/ABCMonumentGroteskMono-Regular.woff') format('woff')
font-weight: 400
font-style: normal
font-display: swap

@font-face
font-family: 'ABC Monument Grotesk Semi-Mono'
src: url('./fonts/ABCMonumentGroteskSemi-Mono-Regular.eot')
src: url('./fonts/ABCMonumentGroteskSemi-Mono-Regular.eot?#iefix') format('embedded-opentype'),
url:('./fonts/ABCMonumentGroteskSemi-Mono-Regular.woff2') format('woff2'),
url:('./fonts/ABCMonumentGroteskSemi-Mono-Regular.woff') format('woff')
font-weight: 500
font-style: normal
font-display: swap

@font-face
font-family: 'ABC Whyte Medium'
src: url('./fonts/ABCWhyte-Medium.eot')
src: url('./fonts/ABCWhyte-Medium.eot?#iefix') format('embedded-opentype'),
url:('./fonts/ABCWhyte-Medium.woff2') format('woff2'),
url:('./fonts/ABCWhyte-Medium.woff') format('woff')
font-weight: 500
font-style: normal
font-display: swap

@font-face
font-family: 'ABC Whyte Regular'
src: url('./fonts/ABCWhyte-Regular.eot')
src: url('./fonts/ABCWhyte-Regular.eot?#iefix') format('embedded-opentype'),
url:('./fonts/ABCWhyte-Regular.woff2') format('woff2'),
url:('./fonts/ABCWhyte-Regular.woff') format('woff')
font-weight: 400
font-style: normal
font-display: swap

Вот как это выглядит на сайте шрифт на сайте Использую препроцессор SASS и GULP

Проверял пути/имена/табуляцию, всё указано верно. Причем заметил такую штуку, что даже когда я удалял шрифт, откуда-то вместо дефолтного Times New Roman был всё тот же Whyte шрифт.

css frontend шрифты gulp sass
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В итоге перепробовав множество способов, сработал только один.

Убрать все форматы кроме woff и написать их в одну строчку.

@font-face
font-family: 'ABC Monument Grotesk Regular'
src: url('./fonts/ABCMonumentGroteskSemi-Mono-Regular.woff2') format('woff2'), url('./fonts/ABCMonumentGroteskSemi-Mono-Regular.woff') format('woff')
font-weight: 400
▲ 0

Нужно добавить скобки и точки с запятой (Пример с документации на MDN)

@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

UPD. (Подсмотрел у Йезена Томаса.)
Разрывы строк не поддерживаются в SASS, поэтому, чтобы создать src свойство со значениями, разделенными запятыми, вам нужно записать все значения в одну строку

src: url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), и т.д.