Как подключить шрифт в сборке Gulp через font-face?

Question

[DmytroNovikov]

Добрый день,
решил разобраться с gulp создав свою сборку. Вроде бы все хорошо, но уперся в проблему подключения локальных шрифтов через @font-face.

Суть: после подключения шрифтов и запуска gulp на открытой странице localhost:3000 шрифт не подключается, отрабатывает дефолтный.

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

Ниже описание:
1.Создал файл fonts.scss где прописал @font-face с путем на уже скомпилированные шрифты в папке dist в форматах woff и woff2


2.Подключил fonts.scss в main.scss с помощью @import "fonts.scss". Применил шрифт "WaterBrush" к классу .text1 в HTML и прописал font-weight: bold;


3.Подклчили файл со стилями в HTML. Путь прописал к итоговому файлу main.min.сss в папке dist. Именно к нему будет обращаться файл html в папке dist


4.На скрине ниже минимизированный index.html и main.min.сss с папки dist. Как видим пути все прописаны, @font-face вставлен в css, но в итоге ничего не работает




Должно быть такое начертание:


Помогите пожалуйста с подключением, не дает мне покоя эта задача. Огромное спасибо!

Ссылка на мой гит с этой сборкой:

Comments

[Ankhena]

1. Одно свойство src и в нём через запятую шрифты.
В форматах woff2 и woff (если поддерживаете предыдущее поколение браузеров).
Причем, сначала woff2 и только потом woff. Иначе до современного формата никакой из браузеров не дойдет (проверяйте на вкладке Network)
Остальные форматы в помойку.

Пример

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

2. Дальше, вы почему-то подключаете шрифт regular, а браузеру говорите, что его нужно применять в качестве жирного курсива.

3. Ну и самое важное - это пути к файлам.
Откройте инструменты разработчика и посмотрите по какому пути браузер ищет файлы и где они лежат на самом деле. Используйте пути к шрифтам относительно готового css. Судя по скринам, должно быть типа того ../fonts/font.woff2

Answer 1

[Сергей delphinpro]

Шрифт "не подключается" только в одном случае – он не смог загрузиться.
Открываете консоль и смотрите сетевые запросы. Там будет видно, что запросы к шрифту завершаются со статусом 404.
Наводящий вопрос: зачем вы в подключении шрифта пишете путь к нему начиная с dist?

spoiler

Уберите /dist и всё будет ок.
Пишите либо /fonts, либо ../fonts
Второе предпочтительнее