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


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

Локальное подключение уникального шрифта на сайт

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

Определимся с основными форматами подключаемых шрифтов.


EOT (Embedded OpenType) – старый формат от Microsoft. Он необходим для обработки шрифтов в старыми версиями браузеров IE. Если вы не собираетесь обеспечивать на сайте поддержку IE8, то можно отказаться от формата .eot.

TTF (TrueType) – формат шрифта от Microsoft и Apple 1980-е годы. Современные файлы шрифтов с расширением .ttf полезны для поддержки устаревших браузеров, особенно для обеспечения мобильной адаптивности.

! WOFF (Web Open Font Format) – формат-обертка для шрифтов TrueType, OpenType. Поддерживается всеми современными браузерами, сжимает файлы.

! WOFF2 – обновление предыдущего формата от Google. Принято считать его лучшим из указанных выше. Предлагает меньший объём файлов при наилучшей производительности. Сокращено (сжато) количество файлов в коде. Поддерживается всеми современными браузерами.

! Указанные выше WOFF и WOFF2 форматы в русском исполнении пока не получили широкого распространения, поэтому перед установкой на сайт проверьте адаптивность шрифта к русскому языку.

Если желаете достигнуть максимальной поддержки шрифтов при просмотре пользователем сайта, то добавьте файлы с расширениями EOT и TTF (.eot и .ttf).
Что касается шрифтов SVG: известно, что Google Chrome полностью удалил их поддержку.

Рассмотрим прогрессивный метод подключения шрифтов через @font-face.


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

Допустим вам понравился оригинальный шрифт Oswald для оформления заголовков.

1. Заходим на сайт https://fonts.google.com и вводим в строку поиска необходимый шрифт, в нашем примере Oswald. Можно использовать фильтр поиска, как показано на рисунках ниже:
выбор шрифта



2. Скачиваем и загружаем распакованные файлы в созданную папку, например: fonts

3. В файле style.css прописываем название шрифта и его локальное расположение. В нашем случае он лежит в папке font.
@font-face {
font-family: 'Oswald'; /* Присваиваем имя, которое будет назначаться в дальнейшем */
src: url('../font/Oswald-Regular.ttf') format('truetype'); /* Прописываем путь к файлу шрифта и его формат-format */
}
Подобным образом поступаем с другими шрифтами, которые желаете подключить к сайту.

Подключение шрифта закончилось.
Теперь необходимо присвоенное выше значение Oswald (в font-family: 'Oswald';) назначить желаемым элементам.

4. Далее в файле style.css определим текстовые элементы кода, которые будут отображаться новым шрифтом.
Пусть это будут заголовки H1 и H2.

Пример: H1,H2 { font-family: Oswald; }

Подобным образом присваиваем значения другим элементам в соответствии с определёнными шрифтами.

Например:
- для блоков div или container: .font-new {font-family: 'Oswald'; font-size: 16px;}
- для строки цвет текста .font-new p {font-family: 'Oswald'; color: #4F5AB6;}

5. После выполненных выше действий заголовки H1 и H2 будут отображаться новым шрифтом.

Выше мы создали новый класс .font-new для использования нового шрифта.

Теперь осталось в файле html указать элементам их значения, например:

Для отдельной строки:
<p class="font-new">Цветной заголовок нового шрифта Oswald</p>

Для блока div:
<div class="font-new">
<h1>Заголовок - шрифт Oswald</h1>
<p>Цветной заголовок нового шрифта Oswald</p>
</div>

Расширенный метод подключения всех форматов шрифтов:


@font-face {
font-family: Имя-Шрифта;
src: url('../font/Имя-Файла.eot');
src: url('../font/Имя-Файла.eot?#iefix') format('embedded-opentype'),
url('../font/Имя-Файла.woff2') format('woff2'),
url('../font/Имя-Файла.woff') format('woff'),
url('../font/Имя-Файла.ttf') format('truetype');
}

Для поддержки современных браузеров, достаточно такого варианта:
@font-face {
font-family: Имя-Шрифта;
src: url('../font/Имя-Файла.woff2') format('woff2'),
url('../font/Имя-Файла.woff') format('woff');
}



Скачать пример локального подключения шрифта к сайту
connect-fonts.zip [72,25 Kb] (cкачиваний: 10)


Особенности обработки шрифта браузером:


Запись шрифта в файле style.css типа: H1,H2 { font-family: Oswald, Georgia, Impact, sans-serif; } указывает браузеру руководство к выполнению поочередных действий:

1. Найти шрифт "Oswald" в CSS файле дистрибутива сайта через @font-face или в операционной системе пользователя (компьютер, мобильное устройство).
2. Если этот шрифт найден, применять его для указанных элементов.
3. Если "Oswald" (Oswald-Regular.ttf) не найден, найти шрифты под названием «Georgia» и «Impact». Если они найдены, то использовать первый из них.
4. Если последние два не найдены (это вряд ли), использовать любой шрифт из семейства sans-serif.

В случае неудачного поиска браузер выбирает шрифт установленный у него по умолчанию или пользовательский вариант в операционной системе.

Шрифты: serif, sans-serif относится к распространённому семейству шрифтов без специфических эффектов (засечек).

Безопасные шрифты

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

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

К безопасным шрифтам относятся: Arial, Verdana, Georgia, Helvetica, Impact, Times New Roman и т.д., в зависимости от операционной системы устройства пользователя.

Автор: Saah | Просмотров: 82 | 18-12-2019,Ср, 14:05  

Комментарии к статье

Автор: Семен Дата: 23 января 2020 02:01

Шрифты украсят сайт. Но на это обращают внимание только специалисты в веб-строительстве

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

@
Похожие публикации