/ Адаптивность / Установка шрифтов

Установка шрифтов

HIT

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

Сайты с шрифтами

Подбираем шрифты, скачиваем исходники.

Сайты с шрифтами
fonts.google.com
webfonts.ru
allfont.ru
www.fontov.net
fontstorage.com

Подключение шрифта на сайте

В папке темы создаем папку fonts и в нее закачиваем файлы шрифтов (можно в корень, можно папками, далее мы будем прописывать к ним путь).

В файле стилей инициализируем шрифт, пример:

@font-face {
    font-family: 'Cuprum';
    src: local('Cuprum'), local('Cuprum-Regular'), url('fonts/cuprum/cuprum.woff2') format('woff2'), url('fonts/cuprum/cuprum.woff') format('woff'), url('fonts/cuprum/cuprum.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

Здесь же указывается путь до файла шрифта
url(‘fonts/cuprum/cuprum.woff2’) — в папке темы/fonts/cuprum/файл
url(‘fonts/fontawesome-webfont.ttf’) — в папке темы/fonts/файл

Не стоит использовать подгрузку шрифтов с других сайтов @import «http://webfonts.ru/import/cuprum.css»;. Это замедляет работу сайта.

Шрифты семейства Arial

font-family: «Arial Narrow»;
font-family: «Arial Black»;

font-infography

Быстродействие

Шрифт загруженный на сайт будет работать быстрее чем подключаемый запросом со стороннего сервиса (например GoogleFont).

Чтобы подключить семейство шрифтов с разными вариантами начертания (bold, italic, light и т.п.) — надо их прописывать следующим образом:

@font-face {
			font-family: "OpenSans";
			src: local('OpenSans Regular'), local('OpenSans-Regular'), url("fonts/OpenSans/OpenSansRegular/OpenSansRegular.woff") format("woff");
			font-style: normal;
			font-weight: 200;
}

@font-face {
			font-family: "OpenSans";
			src: local('OpenSans Light'), local('OpenSans-Light'), url("fonts/OpenSans/OpenSansLight/OpenSansLight.woff") format("woff");
			font-style: normal;
			font-weight: 100;
}

@font-face {
			font-family: "OpenSans";
  			src: local('OpenSans Bold'), local('OpenSans-Bold'), url("fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff");
			font-style: normal;
			font-weight: 400;
}

При этом в стиле глобального вызова шрифта (html, body) необходимо прописать базовую ширину — font-weight: 200;
В некоторых шрифтах (с того же GoogleFont) необходимо подключать версии шрифтов cyrillic и latin.

Добавление extended у шрифта обозначает наличие бОльшего количества символов кириллической группы, а также некоторые знаки (например №). У некоторых шрифтов определенные символы могут входить в «базовую комплектацию», а у других только в версию extended

Алгоритм извлечения шрифта с сайта GoogleFont

  • Генерируем необходимый шрифт, получаем ссылку: https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic
  • Вставляем ссылку в адресную и строку и получаем страницу подгрузки всех начертаний шрифта
  • Выбираем необходимые начертания и копируем ссылки на woff2 файл также через строку браузера
  • Называем файлы нормальными понятными названиями и закачиваем на сайт в папку с названием шрифта (предпочтительно в папку fonts внутри темы)
  • Прописываем в стилях подключение шрифтов (Пример подключения шрифта PTSans):
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(fonts/PTSans/PTSansItalicCyr.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(fonts/PTSans/PTSansItalicLat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(fonts/PTSans/PTSansBoldItalicCyr.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(fonts/PTSans/PTSansBoldItalicLat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(fonts/PTSans/PTSansRegularCyr.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(fonts/PTSans/PTSansRegularLat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(fonts/PTSans/PTSansBoldCyr.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(fonts/PTSans/PTSansBoldLat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Иконки для сайта FontAwesome

Иконки для сайта FontAwesome

FontAwesome — иконочный шрифт (более 600 иконок) который подойдет для большинства сайтов (для контактов, навигации, интернет-магазина и т.д.). Установка шрифта Скачиваем шрифт с сайта. Копируем в наш сайт папку fonts Читать далее »

Относительные единицы измерения текста

Относительные единицы измерения текста

Изначально при разработке шаблонов сайтов пользуюсь единицей измерения px. Но данный подход не является идеальным, т.к. имеет ряд недостатков. Рассмотрим альтернативные варианты задания размера текста. Единицы измерения — px px Читать далее »

Стили текста

Стили текста

Приводим различные варианты оформления текстовой информации. Список Список с маркерами-изображениями 39 номеров 3 конференц-зала Ресторан .punkt li { margin: 5px 0; padding-left: 20px; list-style-type: none; background: url(//undersun-hotels.ru/wp-content/themes/meisterwerk/images/doth.gif) no-repeat left 6px; Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Установка шрифтов Установка шрифтов
Интеграция Woocommerce с 1С
Рекомендации для васИнтеграция Woocommerce с 1СOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.