Использование собственных шрифтов

В системе Документерра можно добавлять собственные шрифты. Вот шаги, которые помогут вам легко добавлять шрифты.

Шаг 1. Загрузите файлы шрифтов в файловое хранилище Документерры

1. Создайте папку на корневом уровне под названием Брендинг (папка нужна, чтобы вы поместили туда все файлы, связанные с вашими пользовательскими стилями).
   
2. Как только папка будет создана, откройте ее и перетащите туда разархивированные файлы шрифтов.

Теперь вы можете закрыть диспетчер файлов Документерры и перейти к следующему шагу.

Шаг 2. Определите собственное семейство шрифтов в CSS-файле

Ниже приведен CSS-код, который нужно добавить в CSS-стили проекта для каждого проекта. Он определяет ваше собственное имя семейства шрифтов и указывает на файлы шрифтов в файловом хранилище. Чтобы открыть CSS-файл проекта, используйте команду «Редактировать CSS» на странице Проекты на панели навигации слева под названием проекта.

Кроме того, вы можете открыть данный файл в редакторе страниц, пока какая-либо страница проекта открыта для редактирования. Нажмите Текущий проект → Настройки → Открыть для редактирования.

Итак, говоря о вашем семействе шрифтов, давайте назовем ваше собственное семейство шрифтов MyFont. Вот соответствующий CSS-файл:

@font-face {
  font-family: MyFont;
  src: url("/resources/Storage/Branding/MyFont.ttf") format("opentype");
}

@font-face {
  font-family: MyFont;
  font-weight: bold;
  src: url("/resources/Storage/Branding/MyFont-Bold.ttf") format("opentype");
}

@font-face {
  font-family: MyFont;
  font-style: italic;
  src: url("/resources/Storage/Branding/MyFont-Italic.ttf") format("opentype");
}

@font-face {
  font-family: MyFont;
  font-weight: bold;
  font-style: italic;
  src: url("/resources/Storage/Branding/MyFont-BoldItalic.otf")
    format("opentype");
}

Открыв CSS-файл проекта, нажмите Редактировать и вставьте определения шрифта в самом начале файла.

Если вам нужно использовать данный шрифт за пределами страниц проекта, в CSS-файле брендинга документации (например, шрифт домашней страницы и т.д.), вам также необходимо добавить те же определения семейства шрифтов в CSS-файл брендинга портала. Файл можно открыть, выбрав Инструменты → Редактировать CSS-файл брендинга портала в главном меню.

Мы добавили определения семейства шрифтов в соответствующие файлы CSS. Давайте продолжим.

Шаг 3. Используйте свое семейство шрифтов в стилях проекта

Чтобы использовать свой собственный шрифт сейчас, вы можете просто указать имя семейства шрифтов, например:

body {
  font-family: MyFont;
}

Однако в CSS принято указывать резервные шрифты, которые браузер может использовать, если он не может использовать самый первый указанный шрифт. Мы также рекомендуем использовать этот запасной подход для вашего шрифта. Например, ваш набор шрифтов может выглядеть следующим образом:

body {
  font-family: MyFont, "Segoe UI Light", "Segoe UI", Tahoma, Geneva, Verdana,
    sans-serif;
}

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

Шаг 4. Добавьте свой собственный шрифт в выпадающий список шрифтов на портале

После шага 3 вы уже можете использовать свой шрифт в стилях CSS, применимых к вашему контенту. Если вы также хотите увидеть свой собственный шрифт в выпадающем списке шрифтов в редакторе страниц, свяжитесь с нами по адресу support@documenterra.ru — мы добавим в этот список новое имя шрифта для вашего портала.

	Совет
Используйте централизованный стиль в CSS-файлах вместо встроенного стиля, чтобы по возможности упростить управление стилями.

То есть, если элемент заголовка 2 на странице должны иметь размер шрифта 16 пикселей, лучше определить его с помощью CSS-файла проекта, а не выбирать каждый элемент заголовка 2 и применять размер шрифта в выпадающем списке «Размер». Использование CSS упрощает сохранение стилей в будущем и обеспечивает их последовательное использование.

Наверх