Свой шрифт в Эгее

Чтобы добавить шрифт в Эгею, есть два способа — это добавление его в стандартный шаблон или создание своего собственного. Создание своего шаблона удобнее, поскольку гарантирует, что изменения не будут потеряны при обновлении или переустановке Эгеи. Но это не точно.

Если не хочется заморачиваться с созданием своего шаблона, можно сразу перейти к подключению шрифта в один из стандартных или в свой собственный шаблон, если он был создан ранее. Для создания своего шаблона в версии 11.2 Эгеи:

1. Откройте папку system\themes\plain.
2. Скопируйте эту папку в user\themes. Если папка themes отсутствует в user, создайте ее. Если Эгея младше версии 11.2, папка themes находится в корневой папке сайта.
3. Переименуйте скопированную папку на свое усмотрение, например, в custom.
4. Откройте файл theme-info.php в папке custom любым редактором кода.
5. В файле theme-info.php найдите строку index и укажите любой порядковый номер шаблона, например 99. В строке display_name укажите имя шаблона на русском и английском.

<?php return array (

  'index' => 99,

  'display_name' => array (
    'en' => 'Custom',
    'ru' => 'Кастом',
  ),

  'colors' => array (
    'background' => '#fff',
    'headings' => '#000',
    'text' => '#000',
    'link' => '#0060a0',
  ),

  'meta_viewport' => 'width=device-width, initial-scale=1',
  'supports_dark_mode' => true,

); ?>

Теперь можно подключить шрифт, например, Tilda Sans VF.

Шрифт Tilda Sans

Tilda Sans — фирменный шрифт Тильды. Это вариативный шрифт с открытой лицензией, все пользователи платформы могут его использовать для коммерческих проектов бесплатно.

1. Создайте папку fonts в папке шаблона.
2. В папке fonts создайте папку tildasans.
3. Скопируйте файлы шрифта TildaSans-VF.ttf, TildaSans-VF.woff и TildaSans-VF.woff2 в папку tildasans.
4. Создайте файл overrides.css в папке styles вашего шаблона.
5. Отредактируйте файл overrides.css:

/* Подключаем шрифты. */

@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/tildasans/TildaSans-VF.ttf') format('truetype');
  src: url('../fonts/tildasans/TildaSans-VF.woff') format('woff2'),
       url('../fonts/tildasans/TildaSans-VF.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Глобальный шрифт сайта. */
  --mainFontFamily: 'TildaSans', system-ui, -apple-system, BlinkMacSystemFont, "SF UI Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  /* Шрифт статей. */
  --noteMainFontFamily: inherit;

  /* Шрифт подписей у изображений, тегов и прочих мелких элементов. */
  --smallFontFamily: inherit;
}

Здесь мы подключаем шрифт и переопределяем глобальные параметры в root. По аналогии можно подключить любой другой шрифт.

Помните, что в overrides.css можно добавлять любые ваши стили. Эгея подхватит этот файл из папки styles автоматически, в любом шаблоне — пользовательском или стандартном.

Дополнительно можно отредактировать размеры шрифтов.

:root {
  /* Заголовок в шапке сайта. */
  --blogTitleFontSize: 20px;
  --blogTitleLineHeight: 26px;

  /* Заголовки перебивок. */
  --subHeadingFontSize: 26px;
  --subHeadingLineHeight: 30px;

  /* Заголовки страниц.  */
  /* Например, заголовок */
  /* на странице тега.   */
  --pageHeadingFontSize: 36px;
  --pageHeadingLineHeight: 40px;

  /* Заголовки статей. */
  --noteTitleFontSize: 36px;
  --noteTitleLineHeight: 42px;

  /* Текст класса .lead */
  --noteLeadFontSize: 26px;
  --noteLeadLineHeight: 30px;

  /* Текст статей. */
  --noteTextFontSize: 20px;
  --noteTextLineHeight: 28px;

  /* Подписи изображений, теги */
  /* и прочие мелкие элементы. */
  --smallFontSize: 12px;
  --smallLineHeight: 16px;

  /* Текст кнопок. */
  --bigButtonFontSize: 20px;
  --bigButtonLineHeight: 28px;
}

aegea-themes-demo/fonts at main · kodersha/aegea-themes-demo

Contribute to kodersha/aegea-themes-demo development by creating an account on GitHub.

GitHubkodersha

Пример шаблона с реализацией описанного в посте гайда, актуален для версии Эгеи 11.2 4116.