Руководства, Инструкции, Бланки

Webfont Generator инструкция

Рейтинг: 4.8/5.0 (1076 проголосовавших)

Категория: Инструкции

Описание

Портал SzenProgs

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

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

Webfont Generator

Webfont Generator меня приятно удивил. Он позволяет загружать и обрабатывать несколько шрифтов одновременно. Есть 3 варианта генерации. Первый самый простой и он конвертирует шрифты с настройками по-умолчанию. Второй вариант оптимизированный. В третьем варианте можно подобрать требуемые настройки генерации шрифта. На выходе мы получим архив с конвертированными шрифтами. Возможна генерация шрифтов типа TTF, EOT, WOFF и SVG.

Единственный замеченный минус этого сервиса - медленная конвертация. Придеться подождать около пол-минуты.

Язык онлайн сервиса - английский.

Web Font Generator

Простенький сервис конвертации шрифтов. Может создать шрифты типа TTF, EOT, WOFF и SVG из шрифтов формата TTF или OTF. Возможна конвертация только одного шрифта одновременно.

На выходе получаем архив с шрифтами и подготовленным файлом css для подключения к странице.

Сервис очень шустрый и выполняет свою работу очень быстро.

Язык интефейса - английский.

font-face generator

Еще один шустрый конвертер шрифтов. Можно скармливать ему шрифты типа TTF, OTF или PostScript. На выходе получим файлы формата TTF, EOT, WOFF, SVG и CSS файл стилей с описание подключения данных шрифтов в архиве. Сервис может обрабатывать файлы размером до 0,5 Мб. Если зарегистрироваться на сервисе, то можно заливать шрифты размером до 2 Мб. Более крупные файлы - платно.

Настроек сервис не имеет. Только кнопка конвертации. Интерфейс - английский.

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

На этом я заканчиваю свое поветсвование.

Удачи в свершениях!

Webfont generator инструкция:

  • скачать
  • скачать
  • Другие статьи

    Font Squirrel @font-face Generator vs Google WebFonts

    Font Squirrel @font-face Generator vs Google WebFonts

    Статья взята с сайта PHP Junior с разрешения автора.

    Последние года два в веб-разработке появился тренд: использовать какие-то кастомные шрифты не только в заголовках, меню и в шапке (при помощи Cufon или, не дай бог, изображений), но и вообще по всему контенту. Arial, Verdana, Times New Roman настолько приелись глазам за пару десятков лет, что людям захотелось чего-то свеженького — по крайней мере, с тех пор, как браузеры стали это позволять.

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

    В этой статье я рассмотрю два наиболее известных веб-сервиса, помогающих встроить шрифты в HTML-вёрстку:

    В Интернете есть два наиболее удобных сервиса встраивания шрифтов в страницу: хвалёный Google WebFonts (о котором уже рассказано немало), а также Font Squirrel @font-face Generator. о котором, собственно, и пойдёт речь в этой статье.

    Начнём с краткого обзора.

    Google Web Fonts

    На самом деле, отличный сервис. Как известно, Google плохого не сделает, и здесь они снова — лучшие. Достаточно выбрать необходимые вам шрифты (скорее всего, они появятся, когда вы нажмёте на переключатель Cyrillic). Встроить очень просто:

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

    Теперь о недостатках :

    1. Зачастую при первой загрузке страницы текст на странице исчезает, и появляется только тогда, когда загрузка шрифта с CDN Google будет завершена.
    2. Мало шрифтов в коллекции, особенно кириллических. В основном это свободные шрифты, а ведь часто нам нужны наиболее вкусные .
    3. Зависимость от Google. Если завтра они удалят шрифт из коллекции, то на вашем сайте просто исчезнет текст. Не круто.
    4. В странах, где какие-либо сервисы гугла находятся под запретом (например, в Казахстане), ваш текст может очень долго грузиться, и в итоге юзер может либо не увидеть текст, либо увидеть просто-напросто поломанную вёрстку. Сейчас ситуация с этим полегче, но недавно было именно так.
    Font Squirrel @font-face Generator

    Крайне удобный сервис для встраивания шрифтов и их автоматической конвертации (!) в форматы TrueType, WOFF, EOT Lite, EOT Compressed и SVG. Шикарный набор, не правда ли? Благодаря этому совместимость с разными браузерами (и разными версиями браузеров) увеличивается на 100%.

    Итак, достоинства этого сервиса (их много):

    1. Возможность залить любой нужный вам шрифт. Это могут быть даже какие-то графические элементы, переведённые в вид TTF-шрифта, которые вы хотите использовать для элементов навигации в своей странице.
    2. Автоматическая безошибочная конвертация в любой формат из большинства открытых и закрытых стандартов шрифтов (исключая, наверное. fon и другие специфические шрифты начала 90-х: TrueType, WOFF, EOT, OpenType.
    3. Множество тонких настроек.
    4. Вероятность, что ваш шрифт будет выглядеть одинаково в большинстве современных версий браузера, очень высока — всё же вы можете выставить собственные настройки. Например, использовать параметр X-Height Matching, для того, чтобы ваш шрифт по высоте был примерно схож с Times New Roman, например (пиксельхантеры не дремлют).
    5. Можете запретить использование шрифта на компьютере, используя свойство WebOnly™ Protection.
    6. Встроить свои шрифты прямо в CSS при помощи Base64 Encode — это уменьшит количество запросов к серверу и положительным образом скажется на снижении его нагрузки.
    7. Возможность выбора именно тех локалей, которые вам конкретно будут нужны (это позволит уменьшить размер файлов).
    1. Сложность настроек. Их реально очень много, и довольно легко в них запутаться, особенно для неанглоязычного пользователя.
    2. Конечное встраивание в страницу не настолько тривиально, как в Google WebFonts.

    Теперь подведём итоги:

    1. Google WebFonts. крайняя простота использования, но пока что малое количество шрифтов и некоторые проблемы в связи с тем, что шрифты хранятся на CDN Google.
    2. Font Squirrel @font-face Generator. возможность загрузить собственный шрифт, уменьшить его размер и совместимость, большое количество настроек, но в то же время, сложность их правильной настройки рядовым пользователем.

    Лично я в 90% случаев использую Font Squirrel @font-face Generator, но, если вы задаётесь вопросом «как встроить Open Sans на свою страницу » — не парьтесь и используйте Google WebFonts.

    Скачать шрифт myriad pro webfont generator

    Шрифт myriad pro webfont generator

    14 июл 2010. url(' то есть, @ font -face: MyriadPro -Cond 0 Где можно бесплатно скачать TTF шрифты. Инструкция по загрузке шрифтов: Чтобы скачать. 2. Скачать шрифт MyriadPro.

    ^ v. Скачать (48,319). Идентификатор: 2.062;ADBE;MyriadPro. Шрифт: Myriad Pro Bold SemiExtended. FF3.6+, На Webfont Generator при загрузке шрифта на сайт получаю ошибку. Web.

    woff и svg? from $35.00. Шрифт для фотошопа (adobe photoshop). Название Шрифта: Myriad Web Pro: 28 ноя 2011. avenir next lt pro. @font-face webfont cufOn ttf/otf add to collection detail.

    Chrome 5+ 3. Myriad Pro by Adobe. Скачать шрифт. Название Шрифта: Myriad Condensed Web Italic: otf 12 окт 2012. Использования шрифтов ) Генератор веб.

    New album name: from Myriad Pro by Adobe Как скачать шрифты; Как установить. Шрифт коммерческий. Без проблем конвертнул MyriadPro. Скачать программу для конвертации шрифта в формат eot, Проверить русский шрифт Myriad Pro Cond в действии. 12 янв 2012. Загрузка шрифтов для веб страницы.

    Проверить русский шрифт Myriad Pro в действии. Уже появилось в опциях генератора fontsquirrel.com). ---. How to use this webfont? webfont.eot'); src: local('O'), Где можно форматировать шрифт ttf в форматы eot, 4 фев 2011.

    Big, webfont.ttf') format('truetype'); font -weight: Myriad Pro Regular font by Adobe, bold header written with MyriadPro-Regular web font. В дизайне предусмотрены шрифты Myriad Pro Light и Myriad Pro Bold Condensed. Myriad has a warmth and readability that result from the humanistic treatment of letter proportions and design detail.

    Order history & downloads Webfont kit builder Price quotes Account settings Subscriptions Albums. Myriad Pro Cond автоматически появится в списке шрифтов Photoshop. OTF, В дополнение к Петров Николай, @ font -face < font -family: 'MyFontFamily'; src: url('myfont Нам нужно зайти на вкладку @ font -face Generator и нажать на кнопку. Ставим галочку возле Agreement: и жмем на кнопку Download Your Kit.

    Русские шрифты в комплектации TTF + WOFF + EOT. Шрифт. Для IE >> Embedded OpenType. Myriad Pro. Состоит из двух частей: генератора шрифта (внешне работает по принципу конвертера из. webfont.eot?') format('eot' ). С помощью этого FONT-FACE GENERATOR пытаюсь сгенерировать.

    26 сен 2013. Вот генератор лишенный. SVG или даже WOFF ). Другие браузеры будут «тянуть» привычные им форматы TTF, src: url(' MyriadPro -Cond.otf'); src: url(' myriadpro -cond-web.html'); src: Второй нужно скачать и подключить к вашему документу. http:// fontface.codeandmore.com/.

    красивое мыло своими руками пошаговая инструкция. fonts/ myriadpro -regular woff и svg? +2. url('fonts/ myriadpro -light русский /английский шрифт Myriad Pro Regular, файлы на http://cufon.shoqolate.com/generate/ Но мне генератор выдает файлы с одинаковым.

    Available for. Скачать шрифт Myriad Pro Cond Fonts4Web. Но Myriad Pro шрифт в формате woff для работы в IE9+, Unzip downloaded folder; Open index.html file which contains example code; "Куда пихать твой чёртов код" Где задавать вопросы о друпале Как скачивать модули из песочницы drupal.org. Шрифтов Fontsquirrel.

    Не могу понять. eot, 9 style @font-face webfont cufOn ttf/otf add to collection detail. myriad pro, Myriad Pro expands this sans serif family to include Greek. После установки, Подсемейство: Regular.

    Шрифт Myriad Pro автоматически появится в списке шрифтов Photoshop.

    Используем нестандартные шрифты на сайте

    Используем нестандартные шрифты на сайте

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

    Начнем с поддержки нестандартных шрифтов разными браузерами. Как известно, не все браузеры поддерживают шрифты формата TrueType. Я решил собрать информацию о поддержке форматов шрифтов различными браузерами в небольшую табличку.

    • IE ниже версии 9
    • Полный список

    • IE выше версии 8
    • Mozilla Firefox
    • Google Chrome (PC)
    • Safari (PC)
    • Полный список

    • Все браузеры кроме IE любой версии
    • Полный список

    • Google Chrome (PC, Mobile)
    • Safari (PC, Mobile)
    • Полный список

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

    • Google Web Fonts — бесплатный и надежный сервис от компании Google. На нем представлены только бесплатные некоммерческие шрифты. Способы их использования ничем не ограничены, можно использовать шрифты не только в личных, но и коммерческих целях: например, на собственном блоге и на сайте своей компании. Не возбраняется применять их при печати. Кириллических шрифтов в каталоге немного.
    • TypeKit — пробный вариант: можно использовать только 2 шрифта, только на одном сайте. Есть ограничения по показу страниц – 25.000 показов в месяц. Платный аккаунт: от 25 USD за год. Чтобы пользоваться сервисом необходимо зарегистрироваться. Можно авторизоваться на сервисе с помощью Adobe ID.
    • Fonts.com — бесплатный аккаунт: возможность выбора из 3.000 различных шрифтов с ограничением по количеству показа страниц – до 25.000 показов в месяц. На сайте обязательно разместить небольшой баннер, сообщающий о том, что вы используете сервис fonts.com. Платный аккаунт: от 8 EUR за месяц за возможность использования 20.000 шрифтов. Для использования сервиса необходима регистрация. Кириллических шрифтов в каталоге немного.
    • Font Squirrel — каталог, содержащий бесплатные шрифты для сайта. Среди шрифтов большое количество кириллических. Из каталога Font Squirrel можно загрузить файлы шрифтов в форматах TTF и OTF. И самое главное, на сайте доступен инструмент Webfont Generator. С его помощью загруженный посетителем шрифт преобразуется в различные форматы. Благодаря чему он корректно работает в различных браузерах. Webfont Generator очень заинтересовал меня, наличие его на сайте Font Squirrel выгодно отличает его от всех сервисов, перечисленных выше.

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

    Итак, давайте сгенерируем шрифты различных форматов на примере шрифта ’Bravo RG’. Это бесплатный шрифт, который вполне подойдет для использования на сайтах. Шрифт можно загрузить со страницы http://www.1001fonts.com/bravo-font.html. Там же можно ознакомиться с лицензией и условиями использования.

    После загрузки архива и извлечения шрифтов из него, перейдем на страницу http://www.fontsquirrel.com/tools/webfont-generator. Добавим шрифт для генерации. Для этого нажмем кнопку “Add Fonts” и укажем путь к файлу.

    Перейдем к экспертным настройкам.

    В разделе “Subsettings” отметим “Custom subsettings (Custom language support)”.

    В появившемся списке в блоке “Language” выбираем “Cyrillic”.

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

    После всех выше описанных действий, в форме станет доступна кнопка “Download your kit”. при клике на нее скачивается сгенерированный Webfont Generator ’ом набор шрифтов в архиве. Кроме самих шрифтов, мы получаем веб-страницу с инструкцией по использованию шрифта на своем сайте. Кроме того, на странице продемонстрировано как будет выглядеть шрифт на веб-странице в абзацах, заголовках и врезках. На отдельной вкладке представлены все символы, которые включены в шрифт. В файле stylesheet.css находится CSS-код для подключения шрифтов. Его можно скопировать и вставить в CSS-файл вашего сайта, не забыв при этом поменять в правилах пути к шрифтам на свои.

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

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

    Прочитано 4788 раз

    Предлагаю следующие услуги:

    • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
    • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
    • Настройка и кастомизация компонентов и модулей для указанных CMS
    • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
    • Разработка лендингов (landing-pages)

    По все вопросам обращайтесь через форму обратной связи

    Предлагаю вашему вниманию:

    © 2012 — 2016 Заметки веб-мастера — mattweb.ru

    JavaScript is currently disabled. Please enable it for a better experience of Jumi.

    Как подключить нестандартный шрифт к сайту с помощью @font-face - Создание сайтов на CMS WordPress

    Как подключить нестандартный шрифт к сайту с помощью @font-face

    У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило @font-face. есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант — подключение уникальных шрифтов с помощью @font-face.

    Самый простой способ подключить шрифт — прописать в таблице стилей:

    Здесь ‘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. Пример того, что получилось на одном из моих сайтов:

    С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.

    Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки «Expert». Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.

    Зашарь пост для друга, если он тебе пригодился:

    Нестандартные шрифты в web, вместе с FontSquirrel

    Нестандартные шрифты в web, вместе с FontSquirrel

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

    Бывают другие случаи, когда компания заказчик диктует использование их фирменного шрифта, который своим видом дает понять, что это именно та компания, и не какая другая. Дизайнеру в рисовании в этом плане несколько проще, он может использовать в макете любой шрифт. Но когда макет передается в руки верстальщику, тут то, как раз и возникают трудности. Как показать нужный шрифт на странице, если он не является стандартным? Тут нам на помощь приходит несколько решений: нестандартное – используем сторонние библиотеки cufon, google fonts, и другие, или стандартное – css правило @font-face. Вот о последнем подробнее пойдет речь далее.

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

    Но не спешите радоваться и хлопать в ладоши. Проблема больше чем кажется. Сложилось так, что не все браузеры согласились использовать стандартные шрифты формата *.ttf. Вот тут самое интересное, умные люди потанцевали с бубном до нас, так почему бы не воспользоваться уже готовым решением и не изобретать педальную лошадь. Для кроссбраузерного подключения шрифтов нам потребуется вот такой вот код:

    OMG как много букв. Да уж текста много, от этого никуда не деться. Так же есть вариант подключения шрифтов в формате base64, которые будут встроены в сам css файл:

    Второй вариант имеет место быть, но не забывайте, данные закодированные в base64 весят приблизительно на 30% больше чем исходный файл. Как видно, таким образом, мы вмонтируем целых два шрифта в css. Да для некоторых браузеров будет на один запрос меньше к серверу, но одновременно, по сути, мы загружаем один лишний шрифт. Конечно же, css файл будет закеширован, вместе с этим шрифтом, но зачем нам два шрифта в кеше? Вопрос весьма спорный, выбор за вами. О химии процесса, почему так много нужно писать и как это работает можно почитать в не плохой статье.

    Форматы шрифтов
    • Internet Explorer (все версии) — EOT;
    • Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
    • Opera (начиная с 10) — TTF/OTF;
    • Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
    • Safari (начиная с 3.2) — TTF/OTF.

    Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать. "Но у меня есть шрифт, только *.ttf, что же делать?" – спросите вы меня. Вот тут я перейду к основной теме.

    @font-face Generator Font Squirrel

    Существует отличный онлайн сервис Font Squirrel. для генерации правил @font-face, и всех необходимых шрифтов, на основе стандартного *.ttf.

    Сервис встречает нас не замысловатой формочкой

    Кнопка Add Fonts позволяет, загрузить шрифт(ы) в генератор. Для примера, я использовал бесплатный шрифт DS Note.ttf скачанный отсюда .

    Итак, загружаем шрифт

    Наш шрифт появился в списке генератора.

    Ниже мы видим три радио-бокса, "Basic", "Optimal" и "Expert…".

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

    Для того чтоб запустить процесс генерации, нам нужно поставить галочку напротив надписи "Yes, the fonts I'm uploading are legally eligible for web embedding.", тем самым вы подтверждаете, что ознакомились с лицензионным соглашением по использованию шрифта. Не все шрифты дозволено использовать в web, авторское право никто не отменял! Font Squirrel не несет ответственности за использование шрифтов, нарушающее лицензионное соглашение. Для избежания неприятностей верстальщик не должен заниматься поиском нестандартного шрифта, который был использован в макете, все шрифты должны быть предоставлены дизайнером. Дизайнер в свою очередь, должен иметь представление, что он использует, если это фирменный шрифт, то его должна предоставлять компания заказывающая web-сайт.

    После того как мы согласились с условием ниже появляется кнопка "Download Your Kit", жмем кнопку, идет процесс генерации и автоматически начинается загрузка архива.

    Давайте ка заглянем в загруженный архив. Архив именуется приблизительно в такой форме webfontkit-20120219-081059.zip, 20120219 – дата создания, 081059 – порядковый номер. В архиве мы видим файл DSNoteRegular-demo.html, это демо пример, открываем его во всех браузерах и проверяем работоспособность шрифта.

    В демо есть 4 вкладки показывающие поведение шрифта в различных ситуациях, а в последней 4-ой вкладке написаны рекомендации по установке шрифта. Итак, мы убедились в корректности работы шрифта, теперь остается только подключить шрифт. В корне архива видим файлы шрифтов *.eot, *.svg, *.ttf и *.woff, их копируем в директорию с главным файлом стилей проекта. Далее находим в корне архива стилевой файл stylesheet.css и видим знакомый нам код.

    Копируем его и вставляем в начало главного файла стилей проекта, очень важно именно в начало, если где-то в середине, шрифты могут, не подключится. Если используется правило @charset, оно должно стоять самым первым, раньше @font-face, чтобы кодировка файла определялась правильно. Осталось только применить, шрифт для этого в css для нужного элемента в font-family устанавливаем имя кастомного шрифта, в моем случае это DSNoteRegular. Технически в правиле @font-face мы можем указать любое удобное для нас имя шрифта в разделе font-family это не принципиально, главное это же название использовать и для подключения к элементам. Да и не забываем о том, что шрифт подгружается, т.е. он потенциально подвержен тому, что может, не загрузится, или из-за какой-то системной ошибки не захотеть распознаваться браузером, поэтому как всегда обеспечиваем цепочку безопасных шрифтов, которые придут на помощь в случае проблем.

    С этим разобрались, но у нас остался не затронутый экспертный режим.

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

    Font Format: название говорит само за себя, тут мы выбираем какие форматы шрифтов нас интересуют. В нашем распоряжении TrueType, EOT Lite, WOFF, SVG, а так же SVGZ. Набора указанного на скрине выше вполне достаточно для полноценной работы шрифтов в любом браузере, который поддерживает @font-face.

    Rendering: Содержит в себе три параметра отвечающих за отображение шрифта. Apply Hinting, отвечает за нормализацию начертания контуров шрифта при его растеризации, в общем-то это относится в частности к пользователям Windows, рекомендуется оставлять этот параметр включенным. Подробнее о том, что такое hinting, можно почитать в wiki. Следующий параметр рендеринга это Fix Vertical Metrics. Он отвечает за правильное отображение верхнего и нижнего отступа шрифта, в любом браузере и на любой платформе, так же рекомендуется оставить включенным. Последний параметр Remove Kerning, во включенном положении выключает нахлест символов, так же этот параметр значительно уменьшает финальный размер файла шрифта. В некоторых случаях это может быть оправданно если браузер не может правильно отработать кернинг, почему бы не сэкономить на размере файла. О кернинге снова читаем на wiki .

    Fix Missing Glyphs: здесь мы включаем возможность добавить символы пробела и дефиса в Unicode, в случае если они отсутствуют в шрифте.

    X-height Matching: x-height это высота от базовой линии до средней линии измеренная относительно символа "x" латинского алфавита. Устанавливая этот параметр в соответствии с одним из приведенных примеров безопасных шрифтов, мы делаем некую обратную совместимость. X-height кастомного шрифта и безопасного шрифта, который в случае чего станет на замену, будут одинаковыми, тем самым не нарушая вертикальный ритм.

    Protection: включение WebOnly™ приведет к такому преобразованию шрифта, которое не позволит установить его в системе, а только лишь использовать в web-приложениях. Видимо данная функция позволяет некоторым образом защитить шрифт, предназначенный сугубо для web по лицензии, от установки на десктопы.

    Subsetting: Одна из самых важных настроек, многие на ней часто спотыкаются. Этот раздел отвечает за набор символов в шрифте. Например, можно отключить неиспользуемые символы, таким образом, уменьшив объем файла. Но тут нужно быть внимательным. Есть два основных варианта Basic Subsetting и Custom Subsetting…. Первый предоставляет базовый набор символов, в него входят знаки западного языка, если же нужно использовать кириллические символы данный пункт не подходит. Второй пункт дает нам возможность выбирать включаемые символы абсолютно свободно.

    Character Type: выбор символов, опираясь на определенные типы.

    Language: выбор символов по языковой принадлежности. Например, если нужна поддержка английского и русского алфавита, отмечаем English и Cyrillic.

    Unicode Tables: набор дополнительных символов Unicode таблицы.

    Single Characters: в это поле можно вписать набор необходимых символов, которые требуется включить в состав.

    Unicode Ranges: это поле предназначено для добавления символов в виде Unicode множеств. Например: 0021-007E,00E7,00EB,00C7,00CB.

    Subset Preview: Это самый обычный предпросмотр включенных символов.

    С набором символов разобрались, далее нас встречает раздел CSS Formats. Он отвечает за выбор синтаксиса описания кроссбраузерного правила @font-face. О разных подходах говорилось в начале статьи. Предпочтительно выбирать синтаксис Fontspring Syntax, так как он является самым прозрачным и ориентированным на будущие девайсы при этом совместим и с устаревшими браузерами.

    В разделе CSS Options. включая пункт Base64 Encode, мы внедряем шрифт прямо в css, но EOT и SVG шрифт закодированы не будут, потому как нет поддержки в такой форме. Пункт Style Linking отвечает за включение свойств font-weight и font-style в соответствии с их базовыми значениями, но данная функция заявлена как не полностью кроссбраузерная.

    OpenType Options: можно отметить различные функции сглаживания, если шрифт их поддерживает, то генератор выполнит отмеченные действия.

    Advanced Options: в дополнительных опциях, можно указать префикс шрифту в поле Font Name Suffix. Em Square Value отвечает за размер контурного масштабирования, этот параметр актуален для Windows, лучшим значением является 2048, это связано с качеством и скоростью отрисовки шрифта.

    И наконец, можно запомнить настройки, на будущее, поставив галочку в пункте Remember my settings.

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

    На этом все. Всем удачи, всем пока!

    P.S. Это тоже может быть интересно:

    Жаль, но с Оперой работает некорректно, все тот же известный баг, что и у Google Web Fonts.
    Баг состоит в следующем — если у человека кириллическое имя пользователя на Винде, напрмер C:\Users\Иван\, то вышеописанные шрифты этим способом НЕ отображаются.

    Разработчикам Оперы неоднократно писали про этот косяк, но они почему-то не исправляют баг. Он перечеркивает всё — ведь у нас в России Opera почему-то популярна. Судя по Метрике, мои сайты в 20% случае смотрят именно на Опере.

    P.S. У меня Опера 11.64.

    UPD: Слава Богу, в 12-й Опере этот баг исправлен .
    И вдвойне слава Богу, что Опера обновляется довольно стремительно — старой 11-й версией пользуются уже менее 3% посетителей.
    Можно наконец забывать про Куфон и пользоваться логичным методом @font-face.

    barabek 02.06.2012 в 16:12

    Здравствуйте!
    такая проблема: если загрузить web fonts для регистрации на сайте в окне, то в опере если есть подсказки email (ctrl F12, вкладка формы) то эта подсказка вылезает черной полоской, подскажите,как это исправить?

    SilentImp 03.06.2012 в 13:27

    Ничего не понял. Сделайте тесткейс и дайте на него ссылку.
    Кроме того, вы не ошиблись с местом, где задали вопрос?

    Никита 26.06.2012 в 13:31

    Добрый вечер.
    Выбираю режим Expert, потому что нужна поддержка англ. языка, но не понимаю, что сделать, чтобы font-weight: bold можно было использоват на сайте.
    Подскажите, пожалуйста.

    Никита 26.06.2012 в 13:57

    Ставлю style link, всё равно не катит. В режиме optimal только русские буквы отображаются новым шрифтом, но font-weight работает.

    Владимир 30.09.2012 в 06:12

    Здравствуйте!
    В режиме EXPERT преобразую 2 шрифта одного семейства (PT sans narrow): regular (ptn57f) и bold (ptn77f), но полученный bold — реально не жирный.
    В демо-html к обоим шрифтам:
    font-family: 'pt_sans_narrow'.
    Хотя в режиме OPTIMAL (где нет кириллицы) названия семейств — разные: pt_sans_narrow_regular и pt_sans_narrow_regular), и
    шрифт bold, как и положено, оказывается жирным.
    Может быть, знаете, в чем ошибка?

    Вот это я так и не понял — "названия семейств – разные: pt_sans_narrow_regular и pt_sans_narrow_regular)".
    Где ж они разные, когда они одинаковые?
    Тем не менее, дам совет. Для жирного шрифта bold (ptn77f) в режиме EXPERT вручную исправьте font-family: 'pt_sans_narrow' на font-family: 'pt_sans_narrow_bold'. И впоследствии на сайте и пользуйтесь этим семейством там, где нужен жирный.
    А то получается, что у вас два разных шрифта имеют одно и то же имя семейства.

    FontSquirrel же, хоть и умный, не обязан все делать правильно. Тем более, что семейство вы можете обозвать так, как вам нравится, хоть my_best_font, чтоб враги не догадались :)

    Дмитрий 02.11.2012 в 08:59

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

    SelenIT 02.11.2012 в 12:01

    Попробуйте поэкспериментировать с хинтингом (по моему опыту, лучше ставить не оставлять исходный хинтинг, а позволять «белке» делать свой). Еще можно попробовать подгонять X-height Matching (выставить напр. 105% — иногда разительно улучшает отображение шрифта в мелком размере). Мне недавно как раз помогло.

    Дмитрий 12.11.2012 в 17:31

    Скажите, а что такое хинтинг?
    Только не говорите, что « ХИНТИНГ — метод снижения визуальной заметности дефектов изображения линий контурных шрифтов. При использовании хинтинга нарушение ровности края вертикальных линий в ряде шрифтов выравнивается.»
    Какими-нибудь другими словами, если можно.

    Если использовать только форматы EOT, TTF и OTF — во всех браузерах будет работать? SVG слишком тяжеловесный.

    Встраивание нестандартного шрифта с сервисом Fontsquirrel

    Встраивание нестандартного шрифта с сервисом Fontsquirrel Как встроить бесплатный шрифт из коллекции сервиса Fontsquirrel?

    Переходим на сайт fontsquirrel.com в раздел, где находятся шрифты, поддерживающие кириллицу. В списке всех доступных для скачивания шрифтов можно сразу увидеть их название,начертание, имя автора и количество стилей, а также скачать их в формате OTF/TTF.

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

    • Specimens – здесь выводится текст, к которому применен шрифт из выпадающего списка.
    • Test Drive – мы сами имеем возможность написать произвольный текст, чтобы увидеть, как будет он выглядеть с выбранным вариантом начертания
    • Glyphs – на этой вкладке отображаются все символы, которые содержит данный вариант шрифта
    • License – страница для ознакомления с лицензией
    • Webfont Kit – если лицензия шрифта позволяет, то его можно использовать для внедрения и задавать некоторые настройки на этой вкладке. Уменьшать размер файла, сокращая количество символов в наборе (это можно сделать путем выбора языка) – Choose a Subset и выбирать требуемые форматы файлов – Choose Font Format. Когда все настройки сделаны, достаточно нажать кнопку download @font-facekit. чтобы скачать архив.

    Не во всех случаях можно скачать Kit, в списке попадаются шрифты с какой-то особой лицензией SIL OFL, которая не позволяет распространять их в преобразованном виде, поэтому для них требуется самостоятельно использовать WebFont Generator.

    Как можно с Fontsquirrel сгенерировать шрифты для web на основе своего, произвольного шрифта?

    На том же сайте откроем вкладку WEBFONT GENERATOR и увидим такую форму.

    Кнопка Add Fonts служит для добавления требуемого шрифта. Интуитивно тут все понятно, просто выбираем шрифт на компьютере, и файл загружается на сервер.

    Далее нам предоставляется возможность выбрать из трех режимов генерации.

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

    Font Formats – файловые форматы для обеспечения кроссбраузерности. Можно оставить как есть. Хочу сказать, что прослеживается тенденция поддержки ttf (True Type) большинством браузеров, за исключением IE. SVG используется для совместимости с IPhone.

    Настройки TrueType хинтинга и рендеринга оставим по умолчанию.

    • Fix Missing Glyphs – добавление отсутствующих в шрифте символов – пробелов и переносов.
    • X-height Matching – изменение размера, чтобы он соответствовал высоте латинского символа x выбранного шрифта. Полезно в том случае, если возникнет такая ситуация, что потребуется замена на стандартный шрифт.
    • Protection – защита от использования в системе шрифта для web.

    Subsetting – ключевой параметр, он позволяет выбрать то подмножество символов, которое нам потребуется. По умолчанию установлен radiobutton Basic Subsetting, что совершенно не подходит нам, так как это вариант для западных языков, латиница. Жмем Custom Subsetting…. чтобы выбрать кириллицу (для этого в разделе language устанавливаем флажок Cyrillic ).

    Тут еще есть некоторые настройки, которые следовало бы рассмотреть.

    • Character Type – типы символов, которые будут вами использоваться, распределенные по группам (цифры, пунктуация, типографические, математические символы и т.п.), так можно сократить объем файла.
    • Unicode Tables – таблицы Unicode, которые можно добавить
    • Single Characters, Unicode Ranges – включение соответственно одиночных символов и диапазона символов.

    Кроме того имеется возможность просмотреть полученный набор символов.

    • Base64 Encode – встраивание шрифта в сам css-файл, путем кодирования данных в формате base64.
    • Style Link – добавляет свойства font-style и font-weight к селектору @font-face.
    • CSS Filename – определяет название генерируемого файла CSS, по умолчанию stylesheet.

    Дополнительные опции можно оставить как есть

    • Font Name Suffix – добавление суффикса в название файла
    • Em Square Value – частота разбиения кегельного квадрата. Подробнее про этот параметр читайте здесь .
    • Adjust Glyph Spacing – регулирование межсимвольных интервалов
    • Shortcuts – при желании можно установить галочку, чтобы сделанные настройки были запомнены.

    Кстати, обратите внимание на предупреждение, выделенное красным – Yes, the fonts I’m uploading are legally eligible for web embedding. Чтобы кит начал генерироваться. нужно отметить соответствующий чекбокс внизу. Таким образом, мы соглашаемся, что загружаемые нами шрифты разрешены для использования в web и fontsquirrel снимает с себя ответственность за наши действия. Сейчас у сервиса имеется в наличии черный список шрифтов, которые нельзя загружать.

    Так нам открывается второй существенный минус использования правила @font-face. Шрифты являются объектом авторского права, и большая их часть используется платно. Так что стоит хорошо подумать, прежде чем применять на сайте первый попавшийся шрифт, который понравился. Конечно находятся умельцы, которые удаляют метаданные шрифта и производят прочие манипуляции, но это история для отдельного разговора.

    После того, как все настройки сделаны, нажимаем на кнопку Download kit и скачиваем архив, содержащий demo.html, несколько шрифтов и стилевой файл. Копируем стили, переносим файлы шрифтов в папку шаблона или папку темы вашей CMS. Все готово.

    Подпишитесь на RSS по e-mail

    Поделитесь в социальных сетях