В стартовом шаблоне «Чертоги Фрилансера» v3.0.0 (далее – ЧФ) весь процесс подключения локальных и иконочных шрифтов максимально автоматизирован. Выходные файлы шрифтов конвертируются из современных форматов .WOFF и .WOFF2, а также выполняется запись подключения шрифтов в файл стилей, включая значение font-weight на основе имени файла.
Как ЧФ обрабатывает шрифты?
При запуске шаблона в любом режиме ЧФ проверит, есть ли файлы шрифтов в форматах .TTF и/или .OTF в папке src/fonts.
Далее происходит три этапа конвертации:
- Файлы .OTF (если они есть) конвертируются в .TTF и хранятся в папке с исходными файлами src/fonts.
- Файлы .TTF конвертируются в .WOFF и записываются в папку с результатом (dist/fonts)
- Файлы .TTF конвертируются в .WOFF2 и записываются в папку с результатом (dist/fonts)
После конвертации ЧФ проверит наличие файла стилей scss/fonts/fonts.scss и, если его нет , запишет в него конструкции @font-face для всех файлов, включая значение font-weight, основанное на имени файла.
Если файл scss/fonts/fonts.scss существует, данные не будут перезаписаны.
Это сделано для того, если нам придется внести изменения в файл scss/fonts/fonts.scss после работы ЧФ, эти изменения не затерялись
В каких случаях нам нужно внести изменения в файл scss/fonts/fonts.scss вручную? Дело в том, что значение font-weight основывается на имени файла шрифта, то есть если файлы называется Roboto-bold, то значение font-weight будет 700. Но если файл будет назван без отделения, например RobotoBold, то адекватное определение не получится и будет записано значение по умолчанию (400). И вот в этих вариантах нам нужно отредактировать файл, указав адекватные значения.
Если мы хотим перезаписать данные в файле
scss/fonts/fonts.scss , нам следует его удалить и перезапустить систему, или запустить команду
npm run fonts (система сама удалит файл и создаст новый)
Как подключить локальные файлы шрифтов:
- Загрузить или получить от дизайнера/заказчика файлы шрифтов в формате .TTF и/или .OTF и положить их в папку src/fonts (если папки нет – создать)
- Раскомментировать подключение файла fonts.scss (строка fonts/fonts) в файле scss/style.scss
- Указать семейство шрифта по умолчанию в переменной $fontFamily в файле scss/style.scss
- Запустить ЧФ в любом режиме
При необходимости вы можете отредактировать созданный и заполненный файл scss/fonts/fonts.scss
При необходимости пересоздать данные в файле стилей scss/fonts/fonts.scss полностью, следует его удалить и перезапустить систему, или запустить команду npm run fonts (система сама удаляет файл и создаст новый)
Как подключить локальные файлы иконочных шрифтов:
- Тем или иным способом создать файл иконочного шрифта в формате .TTF и/или .OTF и положить его в папку src/fonts (разрабатывается работа над автоматизацией этого процесса)
- Отредактировать файл scss/fonts/icons.scss введя классы для иконок, а также убедитесь, что имя шрифта (font-family) для SCSS-шаблона %ic {} совпадает с тем, что указано в файле scss/fonts/fonts. scss
- Раскомментировать подключение файла icons.scss (строка fonts/icons) в файле scss/style.scss
- Запустить ЧФ в любом режиме
Как подключить шрифты с Google Fonts:
Самый простой способ – это воспользоваться плагином для VS Code Google Fonts
- Нажимаем F1 и ищем плагин Google Fonts
- Если мы хотим подключить шрифт отдельным тегом link в HTML файл, выбираем Google Fonts: insert <link>
- Если хотим подключить шрифт к файлу стилей (обычно это scss/style.scss ), выбираем Google Fonts: insert CSS @import
- Из списка выбираем нужный шрифт, можно воспользоваться поиском
- После вставки строки подключения следует отредактировать строку, оставив только нужные начертания шрифта.
- Также следует добавить в строку подключения &display=swap
Пример подключения шрифта Montserrat:
@import url(https://fonts.googleapis.com/cssfamily=Montserrat:400,500,800&display=swap);Шрифты, подключенные к Google Fonts, не должны попадать в папку с результатом (dist), они подгружаются с сервера Google.
Также стоит отметить, что получить строчку для подключения шрифта вы можете и без плагина на сайте Google Fonts .