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

Меня тут спрашивают «Как прикрутить свои шрифты к Эгее, но не от Google Fonts?», а потому, расскажу на примере стандартного шаблона plain и движка стабильной версии 3118.

Для начала нам понадобятся сами шрифты. Для примера изменим стандартный шрифт заголовков на Gilroy Extra Bold, бесплатную версию которого можно скачать у автора, а бесплатную webfont версию, которую я использую в примере, можно скачать отсюда. После, откроем каталог шаблона:

../themes/plain/styles/

И создадим в нем папки ../fonts/gilroy, куда положим скачанные файлы шрифта в форматах eot, ttf, woff и woff2. В папке styles шаблона создадим файл fonts.css где подключаем шрифт:

@font-face {
	font-family: 'Gilroy-ExtraBold';
	src: url('fonts/gilroy/34D194_0_0.eot');
	src: url('fonts/gilroy/34D194_0_0.eot?#iefix') format('embedded-opentype'),
	     url('fonts/gilroy/34D194_0_0.woff2') format('woff2'),
	     url('fonts/gilroy/34D194_0_0.woff') format('woff'),
	     url('fonts/gilroy/34D194_0_0.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

К слову, подробнее о @font-face можно почитать здесь. Чтобы подключить fonts.css с вашими шрифтами к шаблону, внесем изменения в main.tmpl.php, для этого скопируем его из:

../system/theme/templates/

И вставим в:

../themes/plain/templates/

Помните, что вносить изменения в файлы стандартного шаблона можно только скопировав их в папку своего шаблона, иначе при обновлении движка все ваши измнениея пропадут. Откроем скопированный main.tmpl.php и после 41 строки добавим:

<?php _CSS ('fonts') ?>

Всё, css с вашими шрифтами подключен к шаблону. Тепепь внесем изменения в основной файл стилей main.css, найдем класс .e2-note h1 и заменим на:

.e2-note h1 {
	color: #000;
	font-size: 40px;
	line-height: 1.4;
	max-width: 720px;
	margin-bottom: 8px;
	padding-right: 25px;
	font-family: 'Gilroy-ExtraBold', sans-serif;
}

Смотрите ещё: Кат в Эгее и Пишем свой шаблон для Эгеи.

Чтобы разминимизировать main.css, для более удобного внесения правок, стоит воспользоваться полезным сервисом. Таким несложным образом можно добавлять любые нестандартные шрифты в свой шаблон Эгеи.

8 октября 2017 Веб · Гайд, Эгея