Записки HTML-верстальщика: шрифты и всё, что с ними связано

 Приветствую всех!

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

Для начала, хотел бы сказать, что наиболее популярным в наше время существует три типа подключения шрифтов: 

1. Использование стандартных шрифтов и отсутствие их подключения как такового (за исключением указания font-family;
2. Использование сервиса google fonts;
3. Использование нестандартных шрифтов.

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

Что касается первого способа, то здесь, наверное, всё прозрачно и понятно. Единственное, хотелось бы знать, какие именно шрифты можно считать стандартными. Я в своей практике пользуюсь подсказкой, которую Вы можете найти по ссылке

Подключение при помощи сервиса google fonts

Здесь также, проблем возникнуть не должно. Перейдя на сайт https://fonts.google.com/ мы можем выбрать понравившийся нам шрифт (или найти шрифт, который используется в дизайне) и сгенерировать нужные нам стили: 

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

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

Шаг первый: Для начала, скорее всего, этот шрифт дизайнер Вам не предоставил (за исключением некоторых отдельных личностей - спасибо Вам! Вы экономите наше время и нервы). Шрифт нужно найти на просторах великой сети интернет. Найдя этот шрифт, сильно не радуемся - скорее всего, он у нас в одном формате. Для корректной работы шрифта во всех браузерах, нам нужно их несколько. Слава Богу, существует большое количество генераторов шрифтов: я использую чаще всего вот этот: https://www.web-font-generator.com/ (еще пару полезных сервисов Вы сможете найти в этой статье). Сервис до безобразия прост. Для начала, мы загружаем туда наш шрифт, ставим галочку напротив  "I'm uploading a font that is legal for web embedding. I checked with the author and/or EULA", немного ждем, и получаем архив с нужными нам файлами: 

Перед тем, как окончательно обрадоваться, что нам всё удалось - проверьте сгенерированный шрифт на то, что он правильно печатает текст на нужном Вам языке (см. скриншот Выше - я проверил наличие правильных символов для английского и русского языков). Бывает такое, что шрифт поддерживает только один язык.

Если Вас всё устроило, жмём кнопку Download Package и смотрим что же мы скачали:

Скачали мы архив, в котором есть 4 файла с нужными нам расширениями шрифтов (woff, ttf, svg, eot), файл styles.css (остановимся чуть позже на нем) и пример того как выглядят шрифты: preview.html.

Из этого архива мы берем файлы шрифтов и переносим в наш проект. Затем открываем файл styles.css. 

Там сервис сгенерировал для нас код, который нам нужен для того, чтобы эти шрифты подключить:

Именно этот код позволяет нам кроссбраузерно и правильно вставить наш нестандартный шрифт на сайт. Расширение шрифта eot нужно для поддержки самых древних браузеров а-ля IE8, шрифт woff - для: 

• IE9+
• FF 3.6+
• Opera 11+
• Chrome 6+
• Safari 5.1+
• Opera mobile 11+, 

шрифт ttf: 

• FF 3.5+
• Opera 10+
• Chrome 4+
• Safari 3.2+
• Opera mobile 10+
• iOS 4.2+
• Android 2.2+,

шрифт svg:

• Opera 9+
• Chrome 4+
• Safari 3.2+
• Opera mobile 10+
• iOS
• Android 3

Ну и далее, мы, как и в стандартном шрифте, можем использовать значение font-family, которое сгенерировал нам сервис. В нашем случае: font-family: Roboto-Black. Хотелось бы добавить небольшой лайфхак: мы в своих последних проектах даем font-family универсальное для любого шрифта, к примеру: font-family: bold - для жирного начертания, а так же, переименовываем наши шрифты, давая им названия bold.svg, bold.ttf и т.д. Таким образом, если нам нужно будет заменить шрифт на какой-либо другой - нам нужно будет только сгенерировать шрифт, переименовать его, и всё. В код лезть нужно не будет вообще! (Естественно, я говорю об обычном CSS, без использования каких-либо препроцессоров).

Спасибо за внимание :)   

Буду рад ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду признателен за Ваши лайки и отзывы.