В прошлой статье я показывал вам, как установить шрифт в windows 7. Это было очень легко. Может быть, вам также нужно знать, как установить шрифт на сайт. Это немного сложнее. Следуйте инструкции.
Как установить свой шрифт на сайт
Я буду использовать сервис fontsquirrel. Дело в том, что он очень хорошо помогает в процессе установки на сайт. На сайте можно скачать много бесплатных шрифтов в форматах otf и ttf. Так, качайте прямо сейчас любой. Например, Troika, которым у меня написано название сайта в шапке (в поиске введите, если что). Вы можете скачать шрифты и в другом месте, необязательно здесь. Но этот сайт нам обязательно понадобится.
Пока не уходите с сайта. Кликните на вкладку «Generator». Там жмете «Upload Fonts» и выбираете файл с шрифтом, который вы скачали. Из трех предложенных вариантов лучше выбирайте Optimal. Не забудьте поставить галочку, что согласны с пользовательским соглашением. После этого появится кнопка загрузки сгенерированного архива с файлами.
Собственно установка на сайт
Переименуйте папку с файлами в название шрифта. Теперь ее нужно скопировать на ваш сайт. Можно сделать это через FTP или диспетчер файлов в вашей CPanel. Копируйте в специально созданную для этого директорию fonts.
Открывайте папку с файлами нашего шрифта. Нас там интересует файл stylesheet.css. Там уже содержится весь код, который нужно вставить в основную таблицу стилей вашего сайта (style.css). Вы можете просто вставить его и не задумываться о синтаксисе. Но я все-таки приведу пару объяснений.
font-family — название шрифта. Именно его нужно будет прописывать в стилях тому элементу, которому нужно задать новый шрифт.
src — пути до файлов шрифта. Eot, woff и ttf — это основные форматы шрифта, которые нужны браузерам. Это необходимо для кроссбраузерности. В общем-то вам не нужно ничего менять. Просто скопируйте код, желательно в начало вашей таблицы стилей.
Проверяем работу
Теперь осталось только проверить, работает ли. Задайте какому-нибудь селектору (например, заголовку) правило font-family: название шрифта. Важное замечание! Не все шрифты поддерживают кириллицу, некоторые могут работать только если вы напишите что-то по-английски. Демонстрация того, что шрифт успешно установлен и работает:
The font ‘Troika’ is successfully installed.
Надеюсь, вам стало понятнее, как установить шрифт на сайт. Используйте генератор fontsquirrel и без проблем устанавливайте любые шрифты в свой проект.