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

От автора: «Перед написанием данной статьи, я пролистал довольно много информации по теме «Шрифты». И очень выразительно запомнил один момент, многие отрицательно отзываются о подключении нестандартных шрифтов. Точнее, не рекомендуют, мол это неправильно, сильная нагрузка и тому подобное.

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

Что значит нестандартный шрифт?

Это шрифт, который по умолчанию отсутствует в программном обеспечении (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;

На этом все! Надеюсь, вы нашли что-то полезное в этом материале для себя. Если остались вопросы прошу задавайте их в комментариях, не стесняйтесь).

, Javascript , да и самих броузеров интернет-страницы превратились в полноценные дизайн-шедевры, отличающиеся хорошей типографикой .
Но что можно сделать с тем скудным набором шрифтов, которые поддерживаються всеми броузерами во всех ОС? Очень мало. Для этого и придумали такое чудо, как CSS -параметр font-face . Об этом и пойдет речь.

Зачем нужен font-face?

font-face используется для того, чтобы подключить к HTML -странице нестандартные шрифты через CSS . В большинстве современных броузеров будет отлично работать как TrueType шрифт (ttf) так и OpenType (otf). Во всех, кроме Internet Explorer . Но для них есть свой шрифт, и об этом позже.

Как подключить нестандартный ttf или otf шрифт в CSS?

В этом нет ничего сложного.
При помощи конструкции font-face в CSS мы можем указать путь к нестандартному ttf или otf файлу, проверить нет ли такого шрифта на компьютере и пользователя и указать имя шрифта, которое в дальнейшем сможем использовать в font-family. Делается это вот так:

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

Теперь шрифт будет доступен по заданному font-family в любом правиле css , а если такой шрифт не установлен на компьютере пользователя, то будет загружен с сервера наряду с картинками. Чтобы использовать его в своих правилах достаточно указать правильно имя:

My_customized_font{ /*...*/ font-family: PT-Sans; /*...*/ }

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

@font-face { font-family: "PTSans"; src: url("css/fonts/ptsans.eot#") format("eot"), url("css/fonts/ptsans.ttf") format("truetype"); }

Таким образом Internet Explorer загрузит только EOT шрифт, пытаясь загрузить его по ссылке css/fonts/ptsans.eot#’) format…
А другие броузеры без проблем выберут TTF шрифт, и загрузят его.

Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT

Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer

Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)

Convert-eot.pl --ttf-to-eot infile.ttf outfile.eot

Оптимизация размера файла шрифта для Web

Файлы шрифтов могут быть достаточно громоздкими. От нескольких сотен килобайт и до нескольких мегабайт. И их размер очень сильно влияет на скорость загрузки сайта. Поэтому логично оптимизировать размер шрифтов. Как? Очень просто:

1. Удалить лишние глифы (символы) из шрифта
2. Удалить лишнюю информацию

Это можно сделать с помощью той же утилиты fontoptimizer.
Всё что тебе понадобится это:

1. Файл с исходным шрифтом
2. Файл с символами, которые должны остаться в файле шрифта в кодировке UTF8

Subset.pl --charsfile chars.txt infile.ttf outfile.ttf

Где chars.txt – файл с набором символов, которые нужно оставить в файле шрифта (файл с символами обязательно должен быть в кодировке UTF8), ну а infile.ttf и outfile.ttf – входящий и выходящий файлы соответственно.
Во время тестирования с помощью fontoptimizer удалось получить из 450Kb-го файла 12Kb-й, что очень ускорило загрузку страницы.

Сервис для автоматического создания font-face, с оптимизацией и конвертацией ttf во все возможные форматы

Если лень делать все ручками, и если это не интересно или просто нет времени, то к твоим услугам отличный сервис, который сам производит оптимизацию шрифтов, конвертирует TTF в EOT, SVG, WOFF и другие форматы, которые можно загружать через font-face, и на выходе выдает архив со всеми файлами, и полностью прописанными правилами font-face для твоего шрифта. Разве не здорово?
Сервис доступен по адресу: www.fontsquirrel.com
Думаю в настройках ты разберешься:)

О недостатках

При всех преимуществах у подключения сторонних шрифтов на страницу есть 2 существенных недостатка:

• во-первых, дополнительный файл шрифта – это дополнительные килобайты, и лишние секунды на загрузку
• во-вторых, не во всех ОС есть хорошее сглаживание шрифтов (например в Windows XP оно просто ужасно), из-за чего по-настоящему красивый и качественный шрифт может выглядеть как-то не естественно и натянуто (особенно при больших кеглях). В таких случаях лучше подойдут векторные картинки SVG или растровые картинки, которые растягиваются средствами броузера, и выглядят достаточно гладко.

Что на самом деле видит посетитель сайта, при применении нестандартного Web-шрифта на данном этапе развития браузеров?

Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты. Некоторые не смущаются и просто создают графический файл, используя нужный им шрифт, но дополнительная графика не всегда подходит странице и у многих её и так хватает. Но есть один подходящий выход! Этим выходом является использования технологии CSS (Cascading Style Sheets) или просто "Каскадных таблиц стилей". Обычно CSS заключается в сам, создаваемый файл, страничку, но можно создать файл CSS (.css) отдельно и соединить его путём прописки между тегом таким образом:

И нам с помошью CSS нужно автоматически закачать и установить файл шрифта True Type Font (.ttf), но установка произойдет только в том случае, если компьютер пользователя не обнаружит требуемого шрифта. Первым делом мы должны указать место положения шрифта. Для этого прописываем между тегами и так:

Таким образом вы можете использовать любые шрифты на своём сайте. Но советую сильно не изощряться, так как сам процесс закачки и установки шрифта тоже требует определённого времени. И если у вас сам шрифт "весит" 500kb и больше, то его не рекомендуется использовать в этом случае.

Честно говоря, проще и правильней делать так:

Хоть Web-шрифты поддерживаются большинством браузеров, в Опере они глючат с самого начала. На некоторых системах не работают вообще, на тех что работают, при перезагрузке страницы могут сработать, а могут не сработать:

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

В тоже время Google предоставляет — API для кроссбраузерного подключения нестандартных шрифтов.

Making the Web Beautiful!

Google определяет браузер и выдает валидный для него CSS и шрифт.

Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в 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 и не только. Мы с радостью ответим на все ваши вопросы

Вам попался капризный заказчик, требующий «расписные» шрифты? Или вы просто создаете стильный тематический сайт, и кастомное написание текста подчеркнет вашу авторскую идею? Рассмотрим один из способов решения данной задачи.

Когда бывает нужно

Для начала рассмотрим наиболее оправданные случаи, в которых Вам могут понадобиться нестандартные шрифты.

• Стильное меню.
• Стильные заголовки .
• Логотип. Создание логотипа – дело серьезное, много книг по этому поводу написано, долго специалисты этому делу обучаются… И автор не станет отбирать у людей их хлеб, но вставит свои пять копеек. Если ваш логотип представляет собой текст, то в целях качественной SEO оптимизации выводить его следует как ТЕКСТ.

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

Пути решения

Как и в большинстве случаев, любое задание имеет несколько путей решения, и наше – не исключение. Поехали:

• Картинка. Отсутствует гибкость настройки, ухудшается скорость загрузки страниц, увеличивается нагрузка на сервер, SEO вообще не при делах.
• Flash. Дополнительные файлы для загрузки, нужны навыки работы в Flash-эдиторах (параметры текста менять тоже здесь), средняя SEO.
• JS. Дополнительные внешние файлы (и все, что из этого вытекает), средняя SEO, текст невозможно скопировать.
• Нестандартные font-ы средствами CSS

Истинный путь самурая, или "да здравствует CSS"

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

@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }

Таким образом мы исключаем необходимость наличия выбранного нами шрифта в ОС посетителя.

Конструкция такого вида позволяет подключить TrueType (ttf) и OpenType (otf) шрифты.

Интересно: OpenType обладает бо́льшими по сравнению с TrueType возможностями предпечатной подготовки и поддерживает бо́льший набор символов при меньшем размере файла.

Казалось бы, на этом тему можно было и закрыть, но есть одно НО… Вспомним о наших «особенных» друзьях, а именно о браузерах семейства IE. Для внедрения нестандартного шрифта в IE шрифт должен быть в Embedded OpenType (eot) формате.

Это мало не единственный случай, когда особенность IE приносит больше пользы, чем вреда. Дело в том, что eot формат подразумевает:

• Шифрование. В файл заносятся данные об адресе проекта, так что украсть шрифт и залить себе на сайт у злоумышленников не получится.
• Компрессию. Файл шрифта сжимается, тем самым уменьшаются временные затраты на загрузку.

Приняв к сведению выше сказанное, модифицируем наш пример:

@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular " ) , url(./ AlexBrush- Regular. eot) ; } @ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }

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

@ font- face { font- family: " AlexBrush-Regular " ; src: url("AlexBrush-Regular.eot" ) ; src: url("AlexBrush-Regular.eot?#iefix" ) format("embedded-opentype" ) , url("AlexBrush-Regular.svg#JournalRegular" ) format("svg" ) ; url("AlexBrush-Regular.woff" ) format("woff" ) , url("AlexBrush-Regular.otf " ) format("truetype" ) , }

Важно!!!

1. Гибкость . Настройка и изменение параметров текста не составляет труда.
2. Скорость . Минимальное число дополнительных файлов для загрузки, не тормозит страницу как такое же количество элементов на js и Flash.
3. SEO . Текст остался текстом – плюсы очевидны.
4. Пример работоспособен в браузерах начиная с: IE4, Op, Fx3.5, Cr2, Sa1.
5. Перед применением шрифта нужно провести его оптимизацию (читайте послесловие).
6. При использовании покупных шрифтов нужно побеспокоится об их безопасности.
7. Если пропускная способность канала связи маленькая, то пока не подгрузится файл шрифта, пользователь либо увидит простой шрифт на месте нестандартного, либо не увидит ничего в принципе.

Послесловие.

Оптимизация шрифта

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

В результате таких стараний файлы шрифтов могут перевалить за отметку десятков мб. А нужно ли нам такое разнообразие? Ведь для придания пикантного стилевого оттенка, нам (в зависимости от ситуации) не обязательно нужны знаки препинания, разнообразные символы. По правде говоря, и разные начертания не всегда нужны. Или допустим, вы оптимизируете свой сайт строго под рунет, без латыни можно обойтись…

Ну, суть Вы уже уловили. Шрифт нужно оптимизировать:

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

Как это сделать? На просторах интернета существует целый ряд сервисов, позволяющих выполнить необходимые операции, например: font-face Generator, Online Font Converter, Web Font Optimizer и др.

Защита

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

При приобретении шрифта Вы получаете право применять его в вэб, но если шрифт с Вашего ресурса выкачает злоумышленник, то ответственность за причинённый разработчику вред понесёт хозяин сайта. Как защитить свой font?

В IE все продумано до нас – защита в формате eot уже встроена. Для всех остальных обозревателей однозначного решения пока нет.

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

Также вы можете просто применить бесплатные шрифты.