Подключение шрифтов с Google Fonts:
Самый простой способ – это воспользоваться плагином для VS Code Google Fonts
- Нажимаем F1 и ищем плагин Google Fonts
- Если мы хотим подключить шрифт отдельным тегом link в HTML файл, выбираем Google Fonts: insert <link>
- Если хотим подключить шрифт к файлу стилей (обычно это src/styles/style.scss ), выбираем Google Fonts: insert CSS @import
- Из списка выбираем нужный шрифт, можно воспользоваться поиском
- Из списка выбираем нужные вариации шрифта
- Жмем «Ok»
Пример подключения шрифта Montserrat + варианты:
@import url(» https://fonts.googleapis.com/css?family=Montserrat:regular,600,700&display=swap «);
Шрифты, подключенные к Google Fonts, не должны попадать в папку с результатом (dist), они подгружаются с сервера Google. Но, если вы хотите, чтобы подключенные удаленные шрифты подключились локально, воспользуйтесь настройкой ЧФ4: fonts -> download: true
Также стоит отметить, что получить строчку для подключения шрифта вы можете и без плагина на сайте Google Fonts .
Подключение локальных файлов шрифтов
В стартовом шаблоне «Чертоги Фрилансера» 4 (далее – ЧФ4) весь процесс подключения локальных и иконочных шрифтов максимально автоматизирован. Исходные файлы шрифтов конвертируются из современного веб-формата WOFF2 , а также выполняется запись подключения шрифтов в файл стилей, включая значения font-weight и font-style на основе имени файла.
Правила названий файлов шрифтов
Поскольку ЧФ4 автоматизирует процесс подключения семейств шрифтов и их вариаций, важно правильно называть файлы по схеме:
название семьи-вариация
Например, если файл с названием KoPubBatang-Bold.ttf, система подключит семью (font-family) KoPubBatang и вариацию (font-weight) 700.
Пошаговая инструкция по подключению локальных шрифтов:
- Загрузить или получить от дизайнера/заказчика файлы шрифтов в формате .TTF, .OTF или .WOFF2 и положить их в папку src/assets/fonts
- Проверить названия файлов, учитывая информацию выше
- Запустить режим разработки
- Указать семейство шрифта по умолчанию в переменной $fontFamily в файле src/style/settings.scss и, при наличии других семейств и/или вариаций шрифта, другим селекторам в стилях проекта
Как ЧФ4 обрабатывает шрифты?
При запуске сборки в любом режиме ЧФ4 проверит, есть ли файлы шрифтов в форматах .TTF, .OTF или .WOFF2 в папке src/assets/fonts
Далее проходят следующие этапы:
- Файлы .OTF (если они есть) конвертируются в .TTF и хранятся в папке src/assets/fonts
- Файлы .TTF (если они есть) конвертируются в .WOFF2 и записываются в папку src/assets/fonts
- Файлы .WOFF2 (если они есть) просто сканируются для следующего этапа подключения
- Файлы-производители .OTF и .TTF (если они есть) удаляются
- После конвертации ЧФ4 запишет в файл src/styles/fonts/fonts.css конструкции @font-face для всех файлов, включая значения font-weight и font-style, основанные на имени файла шрифта. Заполненный файл стилей автоматически подключится ко всем HTML-страницам проекта
Создание иконочного шрифта и подключение его к проекту:
- Поместите иконки в формате SVG в папку src/assets/svgicons
- Включить в настройках ЧФ4 создание иконочного шрифта (fonts->iconsfont: true)
- Запустить режим разработки
- Используйте специальные классы в HTML разметке для вывода иконки из набора. Посмотреть весь набор иконок в шрифте и их классы можно по ссылке в панели разработчика (если она включена в настройках ЧФ4).
Классы иконочного шрифта можно использовать как отдельно:
<button class=»button —icon-some»>Какой-нибудь текст</button>
Так и как модификатор:
<button class=»button button—icon-some»>Какой-нибудь текст</button>
После добавления класса, в объекте создастся псевдоэлемент ::before, который и будет выводить иконку
Настройка ЧФ4 для работы со шрифтами
В файле настроек ЧФ4 в разделе fonts вы найдете:
- iconsfont – включает создание и подключение иконочного шрифта
- download — включает загрузку и подключение локально удаленных шрифтов