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

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

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

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

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

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

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

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

Making the Web Beautiful!

Google определяет браузер и выдает валидный для него 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, то здесь все сводится к минимализму. определенно должна быть быстрее и легче чем обычная.

Форматы шрифтов

Шрифты, как и у многих других файлов, имеют различные расширения (форматы). В кратком обзоре рассмотрим какие именно…

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;

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

Влад Мержевич

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

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову - это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

• Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
• Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

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

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

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

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

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

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

• Шрифты свободны для использования, вам не нужно за них платить.
• Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
• Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.

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

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

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

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

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

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

Такое обилие форматов обусловлено максимальной поддержкой всех браузеров. При этом, браузер загружает первый понятный ему из списка шрифт (при условии указания правильного формата). Форматы описываются в порядке увеличения веса. Но, не смотря на то, что формат «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$.

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

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

Вот мой код:

@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);
• у шрифта может быть правообладатель, а в данном случае его легко будет украсть.

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

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

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

P { font-family: Verdana; }

Этот небольшой кусочек кода означает, что ко всем тегам

Применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .

Веб-шрифты

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

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

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).

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

Подключаем веб-шрифт с помощью @font-face

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

@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

P { font-family: MyUniqueFont; }

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

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

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

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

Шаг 3: добавьте код на сайт

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

...

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

Шаг 4: создайте стиль

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

P { font-family: "Roboto", sans-serif; }

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

P { font-family: "Roboto", sans-serif; font-weight: 700; }

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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