Чем заменить шрифт на сайте? 6 методов

02.12.2011

Шрифты на сайте

Прошли те времена, когда веб-разработчику были доступны всего несколько шрифтов. Сегодня есть хранилище Google Web Fonts, есть скрипты, основанные на JavaScript, поддержка собственных шрифтов внедрена в CSS3 — можно использовать любой метод. Но какой подходит именно в вашем случае? В статье — обзоры, плюсы и минусы каждого из сервисов. Два последних — устаревшие методы, поэтому описаны в образовательных целях. 

@font-face

@font-face
@font-face пришел вместе со спецификацией CSS3. Он умеет загружать ваш собственный шрифт и использовать его в коде. Говоря собственный шрифт, я подразумеваю загрузку c некого URL, Google web fonts работает по тому же принципу, только шрифты грузятся с серверов Гугла.

Плюсы:

  • Работает на CSS, не используется Java или Flash
  • Гибкая настройка
  • Простота использования, никаких дополнительных плагинов или скриптов
  • Хорошая поддержка современными браузерами

Минусы:

  • Очень мало шрифтов(особенно,  с кириллицей) со свободной лицензией. Вы же используете законные методы, верно?

Полезные ссылки:

  • FontSquirrel — огромное количество веб-шрифтов. Наверное, крупнейшее в сети.

Google Web Fonts

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

Плюсы:

  • Работает на CSS.
  • Очень просто и гибко настраивается.
  • Шрифты находятся на серверах Google — скорость загрузки очень и очень радует

Минусы:

  • Мало шрифтов с кириллицей и пока просвета не видно.

Полезные ссылки:

Typekit

Typekit

Функционал аналогичен сервису от Google, но платный. Отличается большой подборкой популярных коммерческих шрифтов, поэтому больше подойдет профессионалам или корпоративным клиентам. Есть бесплатный режим(1 сайт, 2 шрифта, 25000 просмотров в месяц — я думаю, достаточно для старта и тестирования) Сервис принадлежит Adobe.

Плюсы:

  • Огромная подборка шрифтов
  • Простота внедрения и настройки
  • Шрифты на серверах Adobe — надежность на хорошем уровне

Минусы:

  • Платный сервис(цены, кстати, не очень и велики. Для крупного сайта с 500к просмотров — 50$ в год, для персонального с 50к просмотров  — 25$)

Полезные ссылки:

Cufon

Cufon
Один из самых популярных скриптов замены шрифта, который сейчас постепенно уходит в прошлое с появлением сервиса Google и CSS3. Но у него есть одно преимущество — кроссбраузерность. Старые браузеры отлично понимают такой способ внедрения шрифтов.

Плюсы:

  • Отличная поддержка браузерами, в том числе старыми
  • Можно загружать только необходимые символы из файла шрифта, снижая объём и нагрузку

Минусы:

  • Невозможно выделить текст, к которому применен скрипт. В связи с этим целесообразно использовать только с заголовками, но не с основным текстом на странице.
  • Мало свободных шрифтов. Ну, вы помните про лицензии…

Полезные ссылки:

sIFR

sIFR

Еще один из методов, который уходит в прошлое. Но в то время, когда он появился — это было настоящим открытием для веб-дизайнеров. Для реализации используется технология Flash, что в нынешних реалиях — абсолютно неприемлемо.

Плюсы:

  • Встроить можно практически любой шрифт
  • Текст остается доступным для выделения

Минусы:

  • Flash, который используется для реализации — слишком тяжелый и медленный
  • Технология не работает на устройствах от Apple
  • Достаточно трудно внедряется в проект

Полезные ссылки:

Typeface.js

Typeface

Typeface.js был выпущен как альтернатива sIFR, чтобы исключить его минусы. Как понятно из названия, используется JavaScript, что подразумевает хорошую поддержку браузерами. С появлением Cufon — этот способ тоже уходит в прошлое…

Плюсы:

  • Кроссбраузерность
  • Простота внедрения

Минусы:

  • Результат на выходе — изображение, поэтому применять можно только к заголовкам.
  • Мало открытых шрифтов

Полезные ссылки:

  • Typeface.js — на момент написания официальный сайт не работал.

Выводы

  • Заменить шрифт на сайте не сложнее, чем скруглить углы у блока.
  • Есть отличные, бесплатные сервисы и способы замены шрифта.
  • Кроссбраузерность решений достигается, пока, только с помощью JavaScript. Причем, кроссбраузерность не абсолютная, стоит помнить об этом.
  • С кириллицей дела обстоят, традиционно, не очень хорошо. Как вариант — использовать @font-face и положить файл со шрифтом у себя на хостинге.

Статья — вольный перевод статьи Криса Спунера с дополнениями по нашему сегменту Интернета.

Вы наверняка знаете, что в Китае сейчас делают все, включая iPhone. Так почему не попробовать купить напрямую у производителя? Вот списочек — китайские сайты с бесплатной доставкой. Есть все, от косметики и чехлов для мобилок до самих мобильных телефонов и прочей электроники.

Вот и все на сегодня. Удачного дня

,

Комментариев: 10

  1. Manamann

    Господа ! Как вставить 2 шрифта сразу? 
    допустим оба лежат в корне.
    1 нужен на h2 , второй на P

    Ответить
  2. akkad

    Отличная полезная статья! Только всё-равно, хоть и большая скорость загрузки таких шрифтов, всё же работа замедляется. Смотря для каких целей. Иногда очень надо, иногда можно обойтись….

    Ответить
  3. Andrew Gurylyov

    Отличная статья!
    Из минусов typeface: не работает псевдоселектор ::selection. А обычно на картинки он действует. Вернее поставить его можно, но поедет вёрстка. 
    Из его же плюсов: Можно выделить и скопировать текст не смотря на то, что это картинки)))
    В Cufon, если быть точным, текст частично выделяем. Но копированию не подлежит)))
    Среди выводов у вас «Кроссбраузерность решений достигается, пока, только с помощью JavaScript.» — неверный вывод. Абсолютно все браузеры всё равно не будут понимать нужные вам шрифты даже с помощью js.

    Мне больше всего нравится самый простой в использовании вариант @font:disqus -face, а вам?

    Ответить
    • Виктор Милашечкин

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

      Ответить