Как подключить шрифт – Как подключить шрифт в CSS, если он разделен на файлы шрифта в нижнем регистре и отдельно в верхнем?

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

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду…

Когда вы решаете сделать подключение шрифтов font face, то переходите в Google Fonts и выбираете шрифт, например, Open Sans, и он дает вам либо ссылку <link>, либо @import с URL-адресом, по которому должен быть готов шрифт для использования на вашем сайте.

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Вы можете заглянуть туда и посмотреть, что он вернет …

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Разумеется, это всего лишь несколько объявлений шрифта @font-face!

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

Можно и так! Но!

Проблема в том, что здесь Google придумывает разные причудливые гугловские вещи, и содержимое этой оригинальной таблицы стилей изменяется на основе запроса браузера. Снимок экрана выше взят из Chrome 66. А вот Firefox 20 на Windows 7:

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Все по-другому! Здесь только woff, а не woff2. Если мы откроем этот URL-адрес в IE 8, мы получим блок @font-face, включающий формат eot!

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

Не то, чтобы Google Fonts идеально подходил для этих вещей. Например, не контролируя собственные блоки шрифтов @font-face, вы не можете воспользоваться преимущества font-display, что, конечно, не есть хорошо. Может быть, мы когда-нибудь сможем это сделать, или, может быть, стоит разместить на своем сервере Google Fonts, и это еще одна вещь, о которой мы когда-нибудь подробно расскажем.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Подключаем шрифты еще быстрее / Habr


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

Статистика

  • С момента переезда на собственный домен(28 августа), сайт посетило чуть больше двух тысяч человек.
  • Удалось идентифицировать полтора десятка сайтов, которые напрямую тянут шрифты с WebFont.ru.
  • Почти 430 раз скачивали шрифты(самый популярный — Cuprum)
  • Прислали около десятка шрифтов, но почти все оказались платными. Тем не менее, хочу выразить благодарность за проявленную активность.
  • На сайте написали два комментария, один с проблемой, а второй с рекомендацией.
  • Твитнули сайт 9 раз 🙂
  • Комментарии и сообщения на хабре не считаю.

И все это время росла ссылочная масса.

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

С середины сентября я занялся его переделкой и сейчас готов представить вам свежую версию сайта — webfont.ru.

Что сделано
Некая каталогизация

Теперь все шрифты разделены по алфавиту и по типу(с засечками\без, рукописные, моноширинные, декоративные)
Добавлены шрифты

На момент написания статьи на сайте насчитывается 51 font-family в ~150 начертаниях. Еще несколько шрифтов ожидают своего часа.
Сразу хочу попросить всех не скромничать и покопаться в своих закромах. Может у вас лежит хороший бесплатный шрифт, отправьте его на WebFont, помогите общему делу 😉
Уменьшение трафика

Более-менее оптимизирована выдача шрифтов для просмотра. Теперь пользователю не вываливается огромнейший css со вставками в base64.
Шрифты ужимаются gzip-ом и настроено кэширование. На этом останавливаться не собираемся и будем дальше работать над оптимизацией нагрузки\загрузки. Копать еще есть куда.
Плюшки

Так как, шрифтов оказалось больше, чем 10 или 20, то сниппетами, которые были написаны для автоматизации, пользоваться стало невозможно. При развороте, вываливалось больше 100 строк кода.
Вопрос был решен кардинально — был написан плагин для Sublime Text 2. Он при первом запуске загружает весь список шрифтов и выводит такое окошко:

При клике на строчку с названием шрифта, на текущей странице вставляется строчка с импортом и набор font-family для этого шрифта. Вверху окошка есть строчка "*обновить список шрифтов". При клике на нее, за доли секунды весь список обновится и у вас будет актуальная версия всех шрифтов сайта. Т.к. шрифты появляются не каждые 10 минут, то решили остановиться именно на такой реализации.
Со дня на день плагин должен появиться в Package Control.
Плагин для сайта написал Александр Солодовников (dbc2h). За что ему огромная благодарность 🙂
Для NotePad++ пока ничего не сделали, извините.

Кроме того, был написан и представлен на хабре один юзерскрипт, работающий со шрифтами из WebFont. Скоро мы вместе с автором его допилим, и он будет служить как некий инструмент по подбору шрифтов на любом сайте.

Хостинг

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

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

Благодарности

Очень благодарю моих товарищей и наших с вами коллег по цеху: Alexriz, sigma77, Svatov за консультации, помощь, рекомендации и обратную связь. А так же всех тех, кто был неравнодушен к проекту, писал статьи в своих блогах, называл сайт аналогом google/webfonts, говорил о поддержке отечественных производителей — вы вдохновляете! 🙂

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

Спасибо за внимание.

upd 24.10.12 Плагин доступен в Package Control. Искать по названию — WebFont.
upd 22.11.12 Открыта страница Вконтакте — vk.com/webfont

Как подключить шрифт к сайту?

Приветствую читателей блога FairHeart.ru! Оформление текста — важная часть дизайна любого сайта. Многие вебмастера стараются использовать нестандартный шрифт на сайте, чтобы подчеркнуть его индивидуальность и авторский стиль. В этой статье я расскажу вам, как подключить шрифт к сайту.

Не так давно от одного моего постоянного заказчика мне поступила новая работа — сверстать заглушку для сайта (страница, которая показывается посетителям на время, когда на сайте ведутся работы, и он не доступен). Суть работы проста: есть картинка в Photoshop, ее над воссоздать с помощью html и стилей css, сверстать одним словом.

Если вы нормально знаете HTML и CSS, то работа несложная, но в данном случае я столкнулся с одной тонкостью, которую раньше не встречал — использовался нестандартный шрифт. Проблема заключается в следующем...

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

Другое дело сайт. Да, вы можете задействовать нестандартный шрифт на сайте, прописав его «в лоб» через стили CSS, но увидят его только те люди, у которых он присутствует на компьютеру, то есть единицы. Остальные же пользователи будут довольствоваться стандартными вариантами. Так вот, сейчас я вам расскажу, как подключить шрифт к сайту правильно!

Подключение шрифта через файл

И так, у вас есть любимый шрифт, который вы используете в графических редакторах и хотели бы задействовать у себя на интернет ресурсе. Представляет он из себя обычный файл чаще всего с разрешением .ttf, но бывают еще форматы EOT, WOFF и SVG. Чтобы подключить его к сайту нужно задействовать правило @font-face в стилях CSS.

 
@font-face {
    font-family: Lobster; /* Название */
    src: url(fonts/lobster.ttf); /* Путь к файлу */
   }
 
p {
    font-family: Lobster, cursive; /* Указываем для данного элемента подключенный нестандартный шрифт */
   }

Здесь нет ничего сложного. В правиле @font-face прописываем всего 2 вещи:

  1. Название шрифта, которое впоследствии будем использовать при использовании правила font-family для элементов страницы.
  2. путь к файлу со шрифтом, который нужно предварительно загрузить на сервер с помощью ftp клиента.

Далее указываем в правиле font-family для нужного элемента название нашего нестандартного шрифта. В примере это абзац — тег р.

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

Использование Google Fonts

Как вы уже знаете, Google предлагает огромное количество бесплатных сервисов на все случаи жизни. В нашем случае мы воспользуемся одним из них — Google Fonts. Это онлайн хранилище шрифтов. На данный момент их там уже более 600! Давайте посмотрим, как же им пользоваться.

Шай 1. Переходим на главную страницу Google Fonts. В центральной области мы видим список шрифтов с образцами написания слов, а справа набор фильтров для удобного поиска.

Шаг 2. Выбрав понравившийся шрифт, нажимаем на кнопку «Add to Collection». В коллекцию можно добавить сразу несколько вариантов, но усердствовать слишком не стоит — берите только те, что действительно будете использовать.

Шаг 3. Сама коллекция представлена в нижнем поле страницы. Как только она окончательно сформировалась, нажмите на кнопку «Use».

Далее нам нужно сделать 4 действия.

Шаг 4.1. Далее галочками отмечаем разновидности каждого шрифта, которые хотим использоваться. Опять же, лишнее старайтесь не отмечать, ибо в правом верхнем углу есть информер Page Load, который показывает, на сколько замедлится скорость загрузки страницы после подключения всего этого добра. Разумеется, чем меньше, тем лучше.

Шаг 4.2. Во втором пункте выбираем поддерживаемые символы — латиница (Latin) и кириллица (Cyrillic). Есть еще специфические, но это уже по обстоятельствам.

Шаг 4.3. Подключение коллекции к интернет ресурсу.

Существует 3 способа подключения:

  1. На вкладке Standard дается код, который нужно вставить в исходный код страницы между тегами head.
  2. На вкладке @import дается код, который нужно вставить в файл со стилями css. Чаще всего это style.css. Вставляете в самое начало.
  3. На вкладке Javascript есть код, который надо вставить в самый низ исходного кода страницы перед закрывающим тегом body (можно подключить его как и в первом варианте, в тег head, но скрипты принято размещать в самом низу исходного кода, чтобы не мешали загрузке страницы).

Лично я продпочита вариант №2, ибо он затрагивает только стили CSS.

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

Вот и все! Пользуйтесь этими двумя способами на здоровье. Оба рабочие и очень простые. На этом же я хочу закончить свою статью. Благодарю за внимание и до скорых встреч! Если возникли вопросы — пишите в комментариях к статье.

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Как правильно подключать шрифты при помощи CSS? Правило @font-face

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

Нестандартные шрифты CSS

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

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

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

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

Пути решения

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

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

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

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

CSS:

@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 формат подразумевает:

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

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

CSS:

@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 "); 
 }

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

CSS:

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

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

Оценок: 4 (средняя 5 из 5)

Добавить комментарий

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