Записки HTML-верстальщика: шрифты и всё, что с ними связано
Приветствую всех!
Эту статью я хотел бы посвятить одной из наиболее популярных тем, которые можно встретить в верстке - как же нужно правильно загружать нестандартные шрифты, и что можно сделать для наиболее быстрой их замены, если нужно заменить всё семейство шрифтов на сайте полностью.
Для начала, хотел бы сказать, что наиболее популярным в наше время существует три типа подключения шрифтов:
- Использование стандартных шрифтов и отсутствие их подключения как такового (за исключением указания font-family;
- Использование сервиса google fonts;
- Использование нестандартных шрифтов.
Использование стандартных шрифтов
Что касается первого способа, то здесь, наверное, всё прозрачно и понятно. Единственное, хотелось бы знать, какие именно шрифты можно считать стандартными. Я в своей практике пользуюсь подсказкой, которую Вы можете найти по ссылке
Подключение при помощи сервиса 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, без использования каких-либо препроцессоров).