< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приемы верстки html-css » Font-Face: подключение нестандартных шрифтов

Font-Face: подключение нестандартных шрифтов

Font-Face: подключение нестандартных шрифтов

Пост был обновлен: Июл 18, 2015

Здравствуйте дорогие друзья! В данном посте хотел бы  разобрать такой немаловажный момент в верстке, как подключение нестандартных шрифтов. Считаю, что каждый верстальщик должен изыскать методы «борьбы» с нестандартными шрифтами, иначе полет фантазии дизайнера закончится на стандартных шрифтах. Нестандартные шрифты в макете PSD для меня всегда были проблемой: использовать картинки — не удобно и не качественно; использовать скрипты, подобные cufon не совсем подходящий вариант, некоторые моменты, указанные в документации у меня не работали да и вовсе я не хочу уже этим заморачиваться.

В последнее время я стал использовать подключение нестандартных шрифтов прямо из шаблона, используя css-правило — @font-face. Данный подход позволяет нам подгрузить шрифт прямо с шаблона сайта, если он не установлен в операционной системе пользователя.

Css-код будет иметь следующий код:

@font-face {
font-family: Arbat; /* имя шрифта для CSS правил */
src: local("Arbat"), /* проверка на наличие шрифта в ОС пользователя */
url(fonts/Arbat.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
}
[...]

h1 {
font-family: Arbat; /* Данное имя шрифта можно указать нужным элементам */
}

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

Вот примерный список поддерживаемых форматов браузерами:

Поддерживаемые браузеры Формат
Internet Explorer 6+ EOT
Mozilla Firefox 3.5+
Opera 10+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS 4.2+
Android 2.2+
OTF и TTF
Opera 9+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS
Android 3
TTF и SVG
Internet Explorer 9
Firefox 3.6+
Opera 11+
Google Chrome 6+
Safari 5.1
Opera Mobile 11+
WOFF

Такое обилие форматов обусловлено максимальной поддержкой всех браузеров. При этом, браузер загружает первый понятный ему из списка шрифт (при условии указания правильного формата). Форматы описываются в порядке увеличения веса. Но, не смотря на то, что формат «WOF» самый легкий, на первом месте стоит — «EOT». Это необходимо для избежания неккоретного отображения в IE 6-8.

Читайте также:  Иконочные шрифты для сайта — что это и как использовать?

Стоит ли указывать — format?

Декларация «format» необходима для того, чтобы браузер смог сразу определить для себя нужный ему формат.  Т.е. при загрузке он всего лишь отбирает нужный и понятный ему формат из списка. Что будет если не указать format?  Если у вас не указан формат, но при этом подключено более одного браузер их начнет грузить все подряд и перебирать в поиске нужный. Отсюда следует, что подключая более одного формата шрифтов, указание декларации «format» обязательно! Не забывайте, что на обработку тратиться определенное время, а здесь мы можем выиграть.

Для задействования всех форматов наш css-код примет следующий вид:

@font-face {
font-family: "Arbat";
src: url("fonts/Arbat.eot"); /* Для поддержки браузера IE6+ */
src: url("fonts/Arbat.eot?#iefix") format("embedded-opentype"), /* Хак корректного отображения шрифта в IE8 */
url("fonts/Arbat.woff") format("woff"), /* Для современных браузеров */
url("fonts/Arbat.ttf") format("truetype"),
url("fonts/Arbat.svg#arbat") format("svg");
font-weight: normal;
font-style: normal;
}

[...]
h1 {
font-family: Arbat; /* Данное имя шрифта можно указать нужным элементам */
}

Таким образом следует, что, в данном случае, в каталоге «fonts» должны храниться все, перечисленные выше форматы одного шрифта. А где их взять, если в нашей ОС установлен лишь формат — TTF? Для этого воспользуемся специальным сервисом преобразования форматов шрифтов — http://fontface.codeandmore.com. Все, что вам необходимо сделать это загрузить необходимый шрифт из нашей  ОС, нажать на большую красную кнопочку «I want my @font-face kit! » и сервис в считанные секунды сгенерирует нам пакет шрифтов необходимых форматов.

Внимание! Данный сервис теперь платный. Сервис теперь доступен по подписке, правда цена символическая — 1 мес. — 3$.

Fon-face kit generator. Font-Face: подключение нестандартных шрифтов

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

 Fon-face kit generator. Font-Face: подключение нестандартных шрифтов

Распакуйте данный архив в какой либо каталог вашего шаблона, например, создав папку — fonts. Откройте любым текстовым редактором файл с расширением .html (в моем случае это файл arbat.html) и скопируйте оттуда правила font-face и вставьте их в свой файл стилей (только без тегов «<style></style>»).

Читайте также:  Основы семантической верстки на HTML5

Вот мой код:

@font-face {
font-family: 'Arbat';
src: url('arbat.eot');
src: url('arbat.eot?#iefix') format('embedded-opentype'),
url('arbat.woff') format('woff'),
url('arbat.ttf') format('truetype'),
url('arbat.svg#arbat') format('svg');
font-weight: normal;
font-style: normal;
}

Важно! Измените пути к файлам шрифтов на корректные, иначе ничего работать не будет!

Далее необходимому элементу мы прописываем в стилях имя шрифта:

 h1 {font-family: Arbat; } /* В качестве примера я взял заголовок первого уровня */ 

Еще сервисы Font-Face

В качестве альтернативы могу также предложить бесплатные сервисы-генераторы font-face:

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

На последок я хотел бы отметить все преимущества и недостатки данного метода.

Преимущества:

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

Недостатки:

  • данный метод поддерживается не всеми браузерами, даже несмотря на то, что мы использовали различные форматы. Не забываем, что у каждого браузера может быть много версий;
  • некоторые файлы шрифтов могут быть довольно таки тяжелыми и весить несколько мегабайт (хотя, это решаемо), а это может значительно повлиять на скорость загрузки страницы;
  • пока шрифт подгружается пользователь хоть и на мгновение, но все же видит стандартный шрифт (здесь зависит от размера шрифта);
  • могут появляться иногда незначительные баги — при наведении мышкой искажается цвет (Safari, Chrome, Opera);
  • у шрифта может быть правообладатель, а в данном случае его легко будет украсть.

В общем решать вам каким из способов подключения нестандартных шрифтов вам использовать. Мне лично подходит данный вариант.

Ну вот и все, что я хотел сказать по поводу подключения нестандартных шрифтов. Жду реплики в комментариях. Всем удачи! Встретимся в следующих постах…

Пост был обновлен: Июл 18, 2015

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 15, средний бал: 1,67 / 5
Загрузка...

Проверка орфографии

Система Orphus

32 комментариев к статье "Font-Face: подключение нестандартных шрифтов"

  • Макс Апр 28, 2016 в 17:38

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

    • Заур Магомедов
      Заур Магомедов Апр 28, 2016 в 19:19

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

      • Макс Апр 28, 2016 в 20:04

        Пути проверил, все нормально. Не пойму что, но кажется джумла не все шрифты правильно воспринимает.

        • Заур Магомедов
          Заур Магомедов Апр 28, 2016 в 20:19

          Joomla здесь не причем. Что то не то вы делаете. Дайте ссылку на сайт.

          • Макс Апр 29, 2016 в 12:47

            Оказалось просто не там пути смотрел 🙂 Но теперь все равно в FF как то «грязно» показывается. В Chrome нормально отображается

            • Заур Магомедов
              Заур Магомедов Апр 29, 2016 в 22:58

              Все зависит от того, как вы преобразовывали шрифт в font-face. Бывает также, если шрифт установлен в ОС, то смотреться может коряво немного. Если удалить, становится четко. Наблюдал такое с Roboto.

  • Danarat Авг 02, 2015 в 21:42

    Добрый день! Извиняясь но я уже целый день не могу изменить шрифт сайта с русскими шрифтами на уникальный шрифт. ВЫ не могли бы помочь?

    • Заур Магомедов
      Заур Магомедов Авг 03, 2015 в 0:15

      Как понять изменить шрифт? Для чего вы его меняете и что вы сделали, чтобы поменять?

  • Юрий мая 17, 2015 в 15:17

    Подскажите, как решить данный вопрос: Нам делают сайт, на одном компе открывается хорошо через хром, на домашнем — некорректно. Логотип залезает на вкладку «цены».
    Могли бы посоветовать, как это исправить?

    • Заур Магомедов
      Заур Магомедов мая 17, 2015 в 15:24

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

  • Евгений Фев 11, 2015 в 1:03

    Спасибо за интересный блог и статью. Возник вопрос: какое имеют значения буквы после названия шрифта. Например, есть шрифт Segoe UI, а есть Segoe WP и Segoe WPN. В чем разница между этими шрифтами? И еще — как правильно называть гарнитуру шрифта? Обязательно ли нужно использовать классическое название шрифта или я могу называть своим именем?

    • Заур Магомедов
      Заур Магомедов Фев 11, 2015 в 13:30

      Чем отличаются шрифты? Ну здесь можно визуально посмотреть, чем отличаются шрифты — ширина, начертание, гарнитура и т.д.
      По поводу того как называть, то можете использовать оригинальное название шрифта. Не обязательно что то конкретное. Здесь на ваше усмотрение.
      Если нужно подключить несколько шрифтов одного шрифта, т.е. bold, italic, bold italic и т.д., то подключаете все шрифты по отдельности. Например, тот же шрифт Arbat, добавим еще и жирный шрифт — bold.

      @font-face {/* Это обычный шрифт - Regular */
      font-family: "Arbat";
      src: url("fonts/Arbat.eot");
      src: url("fonts/Arbat.eot?#iefix") format("embedded-opentype"),
      url("fonts/Arbat.woff") format("woff"),
      url("fonts/Arbat.ttf") format("truetype"),
      url("fonts/Arbat.svg#Arbat") format("svg");
      font-weight: normal;
      font-style: normal;
      }
      
      @font-face {/* Это жирный шрифт - Bold */
      font-family: "Arbat";
      src: url("fonts/ArbatBold.eot");
      src: url("fonts/ArbatBold.eot?#iefix") format("embedded-opentype"),
      url("fonts/ArbatBold.woff") format("woff"),
      url("fonts/ArbatBold.ttf") format("truetype"),
      url("fonts/ArbatBold.svg#ArbatBold") format("svg");
      font-weight: bold;
      font-style: normal;
      }
      

      Теперь, если хотим применить жирный шрифт, то задаем правило:

      .headerTitle {
      font: bold 20px 'Arbat', sans-serif;
      }
      
  • Богдан Ноя 14, 2013 в 17:21

    Заур, а такие фокусы проходят с кириллическими шрифтами? Я правда только с одним проэксперементировал но, к сожалению, кириллицу не видит…

    • Заур Магомедов
      Заур Магомедов Ноя 14, 2013 в 17:57

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

  • Имран Ильясов
    Имран Июл 22, 2013 в 17:28

    @font-face {
    font-family: «a_futuricaltthin-webfont»;
    src: url(«fonts/a_futuricaltthin-webfont.eot»); /* Для поддержки браузера IE6+ */
    src: url(«fonts/a_futuricaltthin-webfont.eot?#iefix») format(«embedded-opentype»), /* Хак корректного отображения шрифта в IE8 */
    url(«fonts/a_futuricaltthin-webfont.woff») format(«woff»), /* Для современных браузеров */
    url(«fonts/a_futuricaltthin-webfont.ttf») format(«truetype»),
    url(«fonts/a_futuricaltthin-webfont.svg#JournalRegular») format(«svg»);
    font-weight: normal;
    font-style: normal;
    }
    вот css, работает в всех браузерах кроме Оперы Версия: 12.16
    в чем может быть причина??

    • Заур Магомедов
      Заур Магомедов Июл 22, 2013 в 22:26

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

  • Имран Ильясов
    Имран Июл 16, 2013 в 9:05

    Короче вот какая беда, делаю для одно шрифта, работает для другого не работает, в чем может быть причина.

    вот рабочий вариант:
    #top #menu2 li a{text-decoration:none;font-family:Vivadcl;}

    @font-face {
    font-family: Vivadcl; /* имя шрифта для CSS правил */
    src: local(«Vivadcl»), /* проверка на наличие шрифта в ОС пользователя */
    url(/fonts/Vivadcl.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
    }
    вот не рабочий вариант:
    #top #menu2 li a{text-decoration:none;font-family:Sylfaen;}

    @font-face {
    font-family: Sylfaen; /* имя шрифта для CSS правил */
    src: local(«Sylfaen»), /* проверка на наличие шрифта в ОС пользователя */
    url(/fonts/Sylfaen.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
    }

    • Заур Магомедов
      Заур Магомедов Июл 16, 2013 в 9:20

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

      • Имран Ильясов
        Имран Июл 16, 2013 в 9:36

        Скорее всего шрифт защищен. И его просто не возможно использовать в веб

        • Заур Магомедов
          Заур Магомедов Июл 16, 2013 в 9:46

          Тогда используйте другой шрифт, здесь уже ничего не сделаешь.

  • Имран Ильясов
    Имран Июн 10, 2013 в 20:35

    Большой + за пост!! )))

    • Заур Магомедов
      Заур Магомедов Июн 10, 2013 в 22:24

      Спасибо за плюс! Я сам сюда частенько заглядываю, пользуюсь шпаргалкой )))

  • Александр Апр 09, 2013 в 18:24

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

    • Заур Магомедов
      Заур Магомедов Апр 09, 2013 в 19:56

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

  • Виктор Мар 23, 2013 в 20:55

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

    • Заур Магомедов
      Заур Магомедов Мар 23, 2013 в 21:22

      Да, данным сервисом я сам пользуюсь очень часто. Спасибо за отзыв!

  • Виктор Мар 14, 2013 в 2:48

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

    • Заур Магомедов
      Заур Магомедов Мар 14, 2013 в 9:45

      Спасибо за отзыв! Вы знаете, такие комментарии мотивируют на написание новых, полезных и качественных статей. А на счет Евгения Попова вы правы.

      • Макс Апр 28, 2016 в 17:33

        Попов это полный отстой. Посмотрите сколько негативных отзывов о его курсах. Он не программист а непойми что 🙂

        • Заур Магомедов
          Заур Магомедов Апр 28, 2016 в 19:18

          Зачем вы так? Я, например, по урокам Попова учился. Все понятно и доступно. И таких людей как я немало. А негативных отзывов и про меня может быть куча.

  • KrogZ Фев 18, 2013 в 7:59

    Спасибо большое Вам Заур.
    Буду экспериментировать, пробовать и внедрять.

    З.Ы.: Искренне восхищаюсь Вами. 😛

    • Заур Магомедов
      Заур Магомедов Фев 18, 2013 в 9:43

      Спасибо вам за то, что посетили мой блог!!!!

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]