Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html. Свой шрифт на странице Html подключение шрифта

В очередном проекте в очередной раз вижу заголовки и меню нестандартным шрифтом. Сделать картинками? Отстой: неудобно, негибко, медленно. 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 шифрует файл. Как следствие имеем шрифт, который будет работать только в пределах данного сайта.

Здравствуйте дорогие друзья! В данном посте хотел бы разобрать такой немаловажный момент в верстке, как подключение нестандартных шрифтов . Считаю, что каждый верстальщик должен изыскать методы «борьбы» с нестандартными шрифтами, иначе полет фантазии дизайнера закончится на стандартных шрифтах. Нестандартные шрифты в макете 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);
• у шрифта может быть правообладатель, а в данном случае его легко будет украсть.

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

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

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило , есть еще варианты использовать 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, а так же отметьте нужные для вас языки и форматы.

Пример того, что получилось у меня вот:

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

Смотрите сами:

Одни шрифты выглядят более убедительно, другие - более интригующе.

Но как подключить любые шрифты к сайту и применять их где захочется?

В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

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

Вы узнаете:

Способ №1. Быстрое подключение шрифтов к сайту на WordPress (cложность: ⭐ ⭐ ⭐)

Если на ваш сайт установлена премиальная тема оформления - вы можете подключить шрифты за 2 минуты.

Например:

Вы хотите изменить шрифт заголовков своих статей. Для этого:

1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один - "настройки темы".

2. Перейдите в раздел Typography (типография).

3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

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

Способ №2. Используйте всю силу Google Fonts
(cложность: ⭐ ⭐ ⭐ ⭐)

Вы когда-нибудь слышали про Google Fonts? Если вкратце - это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

Шаг 1. Перейдите на официальный сайта сервиса.

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

Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку "+":

Вы можете добавить любые шрифты нажимая на значок "+".

Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект - нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

Но если вам нужно только жирное начертание (для заголовков), выберите только ее.

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

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

Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую "@import" и вставьте на первую строчку CSS файла вашего сайта:

Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/"вашатема"/css/... В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌

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

Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

Например:

Для придания шрифта Roboto всем абзацам я напишу следующее: p { font-family: Roboto;}

Способ №3. Кастомное подключение шрифтов с помощью CSS (cложность: ⭐ ⭐ ⭐ ⭐ ⭐)

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

Где взять веб-шрифты для сайта

А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

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

Шаг 1. Перейдите на официальный сайт сервиса

Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

Например, если есть 4 начертания, будет написано 4 Styles:

Обозначение начертаний шрифтов - нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

Для подключения шрифтов используем @Font-face

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

Плюсы:

• Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
• Файлы шрифтов будут находится на вашем сервере - вы не будете зависеть от сторонних сервисов.

Минусы:

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

Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.

Шаг 2. Пропишите в самом начале CSS файла следующую запись:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normal;
font-style: normal;
}

Где MyWebFont - это название шрифта, а значение свойства src (данные в скобках в кавычках) - их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

Шаг 3. При подключении курсивного начертания, пропишите следующее:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normal;
font-style: italic;
}

Где все то же самое, только свойству font-style мы придали значение italic.

Шаг 4. Для подключения жирного начертания, добавьте следующий код:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: normal;
}

Где свойству font-weight мы задали значение bold.

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

Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: italic;
}

Ну вот и все:) Только что вы подключили 4 начертания шрифта на свой сайт.

Но есть одна ремарка - данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

Как подключать шрифты для сайтов на разных CMS

Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) - если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам - поделитесь ею в социальных сетях.

А также:

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

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

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

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

• Стильное меню.
• Стильные заголовки .
• Логотип. Создание логотипа – дело серьезное, много книг по этому поводу написано, долго специалисты этому делу обучаются… И автор не станет отбирать у людей их хлеб, но вставит свои пять копеек. Если ваш логотип представляет собой текст, то в целях качественной 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, но к сожалению, он пока не может похвастаться полной поддержкой в браузерах.

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