Устанавливаем шрифты в css. Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html Не подключается шрифт 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, но к сожалению, он пока не может похвастаться полной поддержкой в браузерах.

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

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

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

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

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

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

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

Поддерживаемые браузеры	Формат
Internet Explorer 6+	EOT
Mozilla Firefox 3.5+ Opera 10+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS 4.2+ Android 2.2+	OTF и TTF
Opera 9+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS Android 3	TTF и SVG
Internet Explorer 9 Firefox 3.6+ Opera 11+ Google Chrome 6+ Safari 5.1 Opera Mobile 11+	WOFF

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

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

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

Большинство текстовых элементов по умолчанию имеют шрифт 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 16 17 18

div { font-family: Tahoma, Verdana, sans-serif; }

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

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

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

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым этот шрифт будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу нестандартного шрифта. После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Making the Web Beautiful!

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