→ Как подгрузить шрифты на сайт

Как подгрузить шрифты на сайт

В данной статье мы разберемся как можно подгрузить шрифты на сайт.

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

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

Совет от devicehit.ru

Самые популярные способы подгруздки шрифта на сайт

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

Но так-то оно да, только вот когда видишь вместо текста на сайте картинку, замаскированную под шрифт, то согласитесь это как-то неправильно.

Другим весомым фактором для рассмотрения темы шрифтов, является то, что во время создания веб-дизайна сайта неопытные пользователи совершают распространенную ошибку в виде использования специфических шрифтов. Под специфическими шрифтами понимается то, что не у всех пользователей имеется тот шрифт, который используются на сайте, в таком случае все труды по веб-дизайну будут напрасны. Ведь посетитель сайта увидит банально стандартный шрифт. В таком случае рекомендую рассмотреть какие плюсы дает нам загрузка файла шрифта с использованием СSS:

1
Текст, достаточно легко вносить и изменять;
2
В браузере, возможно просто использовать поиск для нахождения требуемых фраз;
3
Браузер позволяет легко настраивать шрифт, методом его уменьшения или увеличения, что дает дополнительный комфорт при его просмотре;
4
Поисковики качественно индексируют содержание ваших документов;
5
Текст при желании можно запросто выделить и скопировать в специальный буфер, а также перевести на любой другой язык;
6
Сами параметры текста можно легко изменять по-своему усмотрению с помощью свойств CSS;
7
Дополнительно, текст при помощи CSS возможно украсить различными эффектами, что положительно скажется на общем дизайне сайта.

Если говорить о минусах, то тут следует отметить:

1
Разнообразие браузеров не позволяет в полную меру использовать поддержку загружаемых шрифтов, тоже касается и единого формата.
2
Шрифт, который имеет более специфическое оформление в отличие от стандартного, занимает куда больший объем, что в свою очередь приводит к замедлению загрузки веб-ресурса.

TTF

Формат TTF является самым поддерживаем, если ориентироваться на современные браузеры. Если у вас имеется шрифт в данном формате, то для того чтобы использовать его на своем сайте достаточно, набрать следующий код (смотреть изображение ниже).

Первым делом загружаем нужный нам файл шрифта с помощью правила @font-face. Далее внутри него задаем название шрифта с помощью font-family, а также путь к нужному файлу через src. Дальше работаем с шрифтов как обычно. Если нам необходимо скажем задать шрифт заголовка, то для h1, как видно на изображении, зададим свойство font-family с тем именем, которое имеется у загруженного шрифта. В случае старых версий Internet Explorer через запятую, обязательно перечисляем запасные варианты. В данном виде шрифт заголовка будет «Comic Sans MS», поскольку Internet Explorer 8 и младше не поддерживает формат TTF. На изображение ниже можно ознакомится с конечным результатьм.

Но, что же прикажите делать, если вам необходимо чтобы шрифт также отображался и на Internet Explorer 8 и младше? Вопрос решается, все также при помощи @font-face, так как он позволяет подключать и использовать сразу несколько файлов шрифтов причем разных форматов. После чего браузер пользователя ресурса сам выберет подходящий шрифт. Выходит, что универсальным решением проблемы является конвертация формата TTF в EOT, такое преобразование позволяет отображать желаемый шрифт во всех современных браузерах.

Для конвертации существуют специальные веб сервисы, которые дают возможность легко преобразовать TTF-файл в EOT-файл. Единственная проблема, что большинство таких ресурсов после конвертации, получаемый файл не поддерживает русский язык. После долгих поисков обнаружился онлайн ресурс, который отлично поддерживает и русский язык.


Теги: как создать сайт css сайт

Читайте также по теме статьи «Как подгрузить шрифты на сайт»:


Вам будет интересно