Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS ? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.
Как подключить шрифт на сайт в CSS
Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1 ) нашего сайта. Для этого выполняем следующие действия:
h1 { font-family : "RalewayRegular" ; }
Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.
Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:
@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; } @font-face { font-family : "RalewayBold" ; src :url("../fonts/RalewayBold.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }
Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров.woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:
@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular/RalewayRegular.eot" ) ; src :url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix" ) format("embedded-opentype" ) , url("../fonts/RalewayRegular/RalewayRegular.woff" ) format("woff" ) , url("../fonts/RalewayRegular/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }
Здесь следует обратить внимание на порядок подключения - это важно!
Не будем вдаваться в подробности, просто запомните вид этой конструкции.
Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них .
Как подключить шрифт с помощью различных сервисов
Также можно воспользоваться сервисом fonts4web для подключения шрифтов:
Самый простой способ подключения шрифтов
Как подключить шрифт к шаблону Moguta CMS
Как добавить ссылку с Google fonts в шаблон Moguta CMS
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы
В нынешнее время все чаще можно встретить сайты где используются нестандартные шрифты. Это под стать современному веб-дизайну, когда креативность ставят выше чем удобство в читабельности. Конечно, такое сочетание случается нечасто, но все же оно бывает. На англо-ресурсах нестандартный шрифт пользуется довольно большой популярностью. Вот, к примеру, посмотреть в оригинале, то есть на родном языке автора. И увидим, как почти в каждой третьей теме применяются своеобразные шрифты.
От автора: «Перед написанием данной статьи, я пролистал довольно много информации по теме «Шрифты». И очень выразительно запомнил один момент, многие отрицательно отзываются о подключении нестандартных шрифтов. Точнее, не рекомендуют, мол это неправильно, сильная нагрузка и тому подобное.
На самом дели такое высказывание, во многих случаях расценивается, как навязывание своего мнения, или даже передача чужого от себя. Стоить отметить, что абсолютно любое дополнительное подключение дает нагрузку на сайт, следуя таким доводом — смело можно сносить пол сайта. Если есть более весомые аргументы в пользу отказа от шрифтов, то да, пожалуйста… а так... необходимо экспериментировать.»
Что значит нестандартный шрифт?
Это шрифт, который по умолчанию отсутствует в программном обеспечении (Windows, Linux и т. д.). Следовательно, если у пользователя в его ПО не окажется соответствующего шрифта, то он автоматически задействует стандартный шрифт из системы. Тем самым нарушается первоначальная идея автора в передаче нужного характера дизайна.
Подключение своих шрифтов на сайт
Подключение шрифта происходит через правило @font-face в каскадной таблице CSS. Оно включает в себя: гарнитуру, относительный или прямой путь, а также проверку на наличие шрифта в ПО пользователя. Вся эта конструкция выглядит следующим образом:
@font-face { font-family: namefont;/*гарнитура*/ src: local("namefont"),/*проверка*/ url: (font/namefont.ttf);/*путь*/ }
Пояснение: свойство font-family определяет семейство шрифта, а src: local осуществляет проверку установки шрифта у читателя. Но такая возможность, что шрифт окажется установлен, выпадает один раз на миллион. Поэтому строка «проверка» не столь обязательная, а вот последняя url «путь» должна находиться непременно (т.к. это путь к самому шрифту, который непосредственно и будет загружаться на сайте).
Кроссбраузерность шрифтов
Следует упомянуть о поддержки браузеров так, как может возникнуть нестыковка. Все популярные браузеры, последних версий, отлично взаимодействует с подключением шрифтов в формате ttf . А говоря о поздних версиях, в частности, IE, а также устройства от Apple, то могут быть трудности. Эту проблему решает специальные сервисы, позволяющие генерировать формат шрифта для каждого браузера в отдельности.
На мой взгляд, это крайняя необходимость. Поясню: IE ниже 10 версии уже требует дополнительных действий. Но процент его использования совсем невелик. А насчет мобильных устройств Apple, то здесь все сводится к минимализму. определенно должна быть быстрее и легче чем обычная.
| Формат | Explorer | Chrome | Firefox | Safari | Opera | IOS | Android |
|---|---|---|---|---|---|---|---|
| TTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| OTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| EOT | 6.0+ | X | X | X | X | X | X |
| WOFF | 9.0+ | 5.0+ | 3.6+ | 5.1+ | 11.1+ | 5 | X |
| WOFF2 | X | 36.0+ | 35.0+ | X | 26.0+ | X | X |
| SVG | X | 4.0+ | X | 3.2+ | 9.0+ | 3.1+ | X |
Форматы шрифтов
Шрифты, как и у многих других файлов, имеют различные расширения (форматы). В кратком обзоре рассмотрим какие именно…
TTF (TrueType Fonts) – самый распространенный формат шрифта в операционных системах. Разработан был еще в конце 80-х, по одному источнику, компанией Apple, а по-другому, совместно с Microsoft. Чаще всего используют именно этот формат шрифта для подключения на веб-страницу. Исходя из поддержки всеми популярными браузерами последних версий.
OTF (OpenType Fonts) – модификация своего предшественника (TrueType) с более расширенными возможностями. Больше символов и меньше веса. Официально был представлен в 96-году компанией Adobe разработан был совместно с Microsoft.
WOFF (Web Open Font Format) – создан на основе двух первых шрифтов с некоторыми изменениями.
WOFF 2.0 (Web Open Font Format) – мелкие изменения в сжатии.
EOT (Embedded OpenType) – создан компанией Microsoft в 2007 году исключительно для браузеров Internet Explorer.
SVG Fonts – поддержка iOS Safari.
Сервис для конвертации шрифтов
Но все-таки случаи бываю разные и если необходимо сделать поддержку шрифта во всех браузерах и устройствах, то придется прибегнуть к сервисам.
Шаг 1-й.
Шаг 2-й.
Слева в сценарии выбираем кириллицу.
Шаг 3-й.
Определяемся с выбором шрифта и кликаем на иконку «быстрое использование».
Шаг 4-й.
На открывающей странице имеется информация, разбитая по шагам:
1. Выбрать стиль шрифта (normal, bold и т.д.);
2. Выбрать поддержку (латынь, кириллица и т.д.);
3. Способы подключения (подробнее чуть ниже);
4. Интеграция шрифта.
Шаг 5-й.
В последнем шаге разберем способы подключения. На самом деле все очень просто. Каждый из трех способов – это отдельный код, который подключается по-своему зависимо от выбора.
1. Стандартное подключение через тег обычно прописывается между тегами
(WordPress файл: header.php ).2. Импортирование в каскадную таблицу через правило @import (WordPress файл: style.css ).
3. Подключение через JavaScript в отдельный файл или также между тегами
.После подключения вам останется указать гарнитуру шрифта в стилях.
Font-family: "Comfortaa", cursive;
На этом все! Надеюсь, вы нашли что-то полезное в этом материале для себя. Если остались вопросы прошу задавайте их в комментариях, не стесняйтесь).
Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать.
Семейства шрифтов
Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:
serif - с засечками
sans-serif - без засечек
monospace - моноширинные
cursive - курсивные
fantasy - декоративные
Безопасные шрифты
Существует достаточно много шрифтов. Сложность их использования заключается в том, что каждая операционная система имеет свой набор шрифтов. Кроме того, различные браузеры также отображают не все шрифты. Если для какого-то текстового элемента установлен шрифт, которого нет в операционной системе компьютера пользователя, то текст будет отображаться каким-то другим шрифтом. Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства.
Times New Roman, serif
Arial, sans-serif
Verdana, sans-serif
Tahoma, sans-serif
Impact, sans-serif
Trebuchet MS, sans-serif
Courier New, monospace
Comic Sans MS, cursive
Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.
Установка шрифта
Чтобы изменить или подключить шрифт в CSS используется свойство font-family . Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт:
Стиль:
Свойство font-family позволяет указать несколько шрифтов через запятую. Также можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают. Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как нужно.
15 |
div { font-family: Tahoma, Verdana, sans-serif; } |
Как подключить нестандартный шрифт в CSS
Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их найти, нужно в поисковике написать - шрифты. Файл шрифта нужно скачать и присоединить к странице. При выборе нужно учитывать, что некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.
Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат woff. Он должен работать в большинстве современных браузеров.
Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым этот шрифт будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу нестандартного шрифта. После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.
Для примера я использую файл шрифта с названием unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.
У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило , есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант – подключение уникальных шрифтов с помощью @font-face.
Самый простой способ подключить шрифт – прописать в таблице стилей:
@font-face { font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); } body{ font-family: "PF Din CompPro", Arial, sans-serif; }
Здесь ‘PF Din CompPro’ – название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-medium-webfont.ttf – это путь к вашему шрифту, который лежит в папке fonts, важно, чтобы в названии файла шрифтов не было пробелов, лучше замените их на тире.
Это самый простой способ, но вот только работает он не во всех браузерах, и это большая проблема.
Каждый браузер поддерживает свои форматы шрифтов:
TrueType
Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT
fonts for Internet Explorer 4+
WOFF
fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG
fonts for iPad and iPhone
Поэтому вам придется из одного своего шрифта в формате.ttf сделать еще несколько таких же шрифтов только в другом формате. Здесь поможет генератор шрифтов на сайте fontsquirrel.com . На этой странице загрузите свой шрифт, выберите настройки Optimal, отметьте чекбокс с подтверждением о легальности загружаемого шрифта (некоторые шрифты стоят очень много денег и у вас должно быть разрешение на их использование), затем нажмите кнопку “Download Your kit” и вы получите нужный архив со всеми форматами своего шрифта.
Из архива скачайте все форматы ваших шрифтов, по идее это 4 файла с расширениями.eot, .svg, .ttf и.woff, эти файлы скопируйте в папку fonts на своем сайте, так же в архиве будет лежать файл stylesheet.css – в нем уже будут прописаны все правила для подключения шрифтов, можете смело скопировать их в свою таблицу стилей, только не забудьте указать свои пути к файлам шрифтов, например, к папке fonts. Пример того, что получилось на одном из моих сайтов:
@font-face { font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype"), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; } body{ font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; }
С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.
Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки “Expert”. Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.
Пример того, что получилось у меня вот:
В очередном проекте в очередной раз вижу заголовки и меню нестандартным шрифтом. Сделать картинками? Отстой: неудобно, негибко, медленно. Flash? Терпеть его не могу. Javascript? Лучшее конечно на сейчас решение, но все равно это костыль, который напоминает об инвалидности браузеров. Пора покопать стандарты: что предлагают и где это уже работает.
Заметка
Нестандартный шрифт в отличии от — это шрифт, который с большой вероятностью будет отсутствовать у большинства посетителей сайта.
Задача
Внедрить нестандартный шрифт без использования картинок, javascript и flash. Используем только последние достижения в .
Решение
Вот только для IE не все так просто. Хотя он и первый начал поддерживать внедрение сторонних шрифтов (еще с 1997 года с выходом Internet Explorera 4-й версии!!!), он требует особого формата для шрифта — EOT (Embedded OpenType). Формат EOT решает сразу две задачи:
- сжимает файл шрифта, делая его вес в разы меньше (судя по тестам коллег этот метод лучше сжимает чем и RAR, и ZIP, и gzip методы)
- шифрует файл: в файл шрифта записывается информация, где он должен быть использован. Вне этого адреса этот шрифт работать не будет.
В итоге подключение шрифта в стилях будет выглядеть в виде такого хака:
/* только для Internet Explorer */ @font-face { font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); } /* далее для всех остальных браузеров */ @font-face { font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); } [...] h1 { font-family: Scriptorama, arial; font-weight: normal; }
Вместо хака можно воспользоваться .
update 23.08.11 Более полный синтаксис внедрения шрифта, в котором учтены некоторые возможные баги IE и большая поддержка браузеров:
@font-face { font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), url("journal-webfont.woff") format("woff"), url("journal-webfont.ttf") format("truetype"), url("journal-webfont.svg#JournalRegular") format("svg"); font-weight: normal; font-style: normal; }
Заметка
update 10.11.10 В IE local может не срабатывать. Более того, из-за него может не подключаться шрифт вообще. В своих проектах на этот момент обращаем внимание: если не работает, просто убираем для IE local.
Преимущества:
- гибкость — владелец сайта может как угодно менять любые тексты;
- быстрая скорость загрузки — минимальное количество внешних файлов при любом количестве текста нестандартным шрифтом;
- максимальная скорость работы сайта — ноль дополнительных элементов в DOM структуре, ноль скриптов и flash объектов, замедляющих сайт;
- текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО;
- довольно простая реализация даже с учетом оптимизаций шрифта.
Недостатки:
Сжатие и конвертация шрифта
Если разработчики шрифта пытались угодить всем и вся, тогда шрифт скорей всего будет содержать символов много-много и соответственно весить много-много. Так шрифт Arial Unicode MS содержит 51 тысячу знаков и весит 23 с лишним мегабайт! Самое время подумать, а будет ли на сайте использоваться удмуртский или фино-угорские языки? А еще различные дополнительные символы, знаки препинания и цифры? А еще следует обратить внимание, что каждый шрифт имеет определенное количество начертаний: обычный, курсив, жирный, полужирный. Шрифт может содержать до 9 видов жирности (вспомни допустимые значения ).
Что делать
Исключаем из шрифта все, что не нужно для реализации поставленной задачи . Например, если шрифт применяется только для меню, тогда знаки препинания, различные дополнительные символы, цифры будут лишними.
Как делать
С этим могут помочь:
Онлайн сервис @font-face Generator
Что может:
- два режима работы: Easy — кто не хочет вникать и Expert — для максимальной оптимизации
- разные форматы результатов и это в одном месте! Т.е. не нужно сначала сжимать для всех браузеров True Type, а потом еще отдельно конвертировать в EOT для IE
- различные опции получения результата. Вплоть до защиты шрифта от локального использования и файла для Cufon!
- точный выбор символов для сжатого шрифта. Можно указать язык и набор дополнительных символов, а можно указать диапазон используемых символов, или просто перечислить символы, которые нужны, или использовать симбиоз всех способов
- для тех кто слаб в CSS, даже стилевые правила сформируют
Для эксперимента сжимал шрифт весом в 145Кб с тестовой задачей "Использовать для меню". Оставил только маленькие русские буквы. Итоговый размер шрифта вышел 8Кб. Поразительно!
Недостатки:
- EOT формируется без привязки к определенному домену (для серьезных проектов все же придется EOT делать отдельно)
- не все лицензионные шрифты может обработать (это недостаток относительный)
Впечатление — фантастика, превосходно, супер-пупер, обалдеть!!! Заведу себе Pay Pal чтобы сделать Donate.
Web Font Optimizer
Онлайн сервис, который позволяет оставить только необходимые символы. Работает .
Из плюсов: прост и понятен. В качестве результат получает True Type сжатый шрифт, EOT шрифт для IE и CSS код для подключения.
Из минусов: сервис доступен только для жестко фиксированного перечня шрифтов, который есть у них на сайте.
WEFT
ПО от Microsoft. Помогает перевести шрифт в EOT. Плюс делает невозможным использование шрифта вне указанного сайта. Скачать и познакомится детальней можно на странице, посвященной скрипту .
TTF2EOT
Из названия понятно, что конвертирует шрифт из TTF в EOT. Работает локально через командную строку, что уже само по себе не удобно. Скачать скрипт и почитать о нем подробней можно на сайте проекта .
Online Font Converter
Прост в работе, позволяет конвертировать и лицензионные шрифты. Доступен .
Из минусов: требуется обязательно регистрация.
Как быть с защитой шрифта?
Если шрифт качественный, он разрабатывается высокими профессионалами, часто командой профессионалов, часто не один месяц. Такой шрифт может стоить не меньше, чем "Жигули" с конвейера. Разработчики шрифтов стали их регистрировать как торговые марки, закрепляя права правообладателя на шрифт уже на уровне охраны промышленной собственности.
Т.е. для использование шрифта в веб, владелец сайта должен приобрести шрифт с правом использования в веб. Но приобретение — это пол проблемы. Нужно еще шрифт защитить от нелегального копирования. Таких проблем почти нет, если лицензионный шрифт на сайте реализован картинками или с помощью Javascript. Но если внедрять через @font-face, шрифт открыто лежит на сервере, который любой пользователь может скачать. А это уже грозит судебными исками.
Заметка
Для миллионов небольших сайтов нелегальное использование шрифтов может и пройдет без последствий, а вот крутым, коммерческим, особенно международным проектам стоит серьезно думать о покупке лицензий.
Как же защитить шрифт?
Для IE эта проблема была решена сразу — формат EOT шифрует файл. Как следствие имеем шрифт, который будет работать только в пределах данного сайта.
