Свяжите внешнюю таблицу стилей шрифтов с системой брендов

Эта статья относится только к шаблонам автоматизации контента, которые отличаются от пользовательских шаблонов Brandfolder и CI Hub. 

Возможно, ваш бренд уже имеет цифровой доступ к шрифтам и готов к использованию в Интернете через CDN (сеть доставки контента). В этом случае вы можете просто связать таблицу стилей CSS, в которой объявлен и доступен ваш размещенный шрифт(ы), с системой бренда, готовой к использованию в ваших шаблонах.

Ссылка на вашу первую таблицу стилей

1. На вкладке Типографика в системе бренда нажмите Редактировать в правом верхнем углу страницы.
2. Мы можем либо обновить объявленный шрифт в существующем шрифте, либо начать с нуля, создав новый шрифт и список шрифтов.
3. Щелкните Add Source на вводе несвязанного шрифта, чтобы открыть модальное окно ссылки на таблицу стилей.
4. На основе@font-facefont-family'объявленного в вашей таблице стилей, вы сможете указать, какой шрифт вы хотите связать во входе Name . Если их несколько, ознакомьтесь с разделом "Шрифты для нескольких шрифтов" ниже.
5. Нажмите Добавить источник , чтобы завершить процесс связывания.

Теперь ваш новый шрифт будет связан с вашей CDN, поэтому при создании шаблона он будет доступен. 

Форматирование таблицы стилей

При ссылке на внешнюю таблицу стилей Brand System ожидает наличия общедоступного CSS-файла, содержащего одно или несколько объявлений@font-faceдля ваших шрифтов. 

Ваш файл должен выглядеть примерно так, как показано ниже. Помните, что таблица стилей, которую вы привяжете к Brand System, все равно должна будет получить доступ к шрифтам, которые вы объявили в URLsrc.

@font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Несколько шрифтов в таблице стилей

Если ваша таблица стилей выглядит так, как показано в примере ниже (т.е. несколько деклараций@font-facefont-family), вам придется настроить несколько шрифтов с одной и той же CDN-ссылкой. Это нужно для того, чтобы вы могли правильно создать шкалы шрифтов на основе новых связанных шрифтов. Чтобы увидеть, как это выглядит в действии, посмотрите видео ниже. 

@font-face { font-family: 'Poppins'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Другие ресурсы

• Веб-документы MDN: @font-face
• Digital Ocean: Как определить пользовательские шрифты в CSS с помощью @font-face и font-display