Как с помощью сервиса Typekit добавить на свой сайт новые шрифты
Используя сотни новых шрифтов от ведущих разработчиков со всего мира, Typekit помогает добавить солидности вашему сайту. Безусловно, для профессионального дизайнера это лучший вариант – воспользоваться поиском нужного шрифта на Typekit.
Вы получаете доступ к продуктам компаний лидеров, специализирующихся на разработке шрифтов: Adobe, FontFont, P22, Typodermic и Veer. И, конечно, сервис тесно интегрирован с рабочим потоком Creative Cloud. Начать работу с Typekit можно в девять простых шагов.
01. Подписка
Если вы являетесь пользователем Creative Cloud, у вас уже есть подписка на TypeKit, (тарифный план «Портфолио»). Просто зайдите на http://www.typekit.com/ и подпишитесь при помощи Adobe ID, который используется для входа в Creative Cloud. После этого вы получите доступ ко всем услугам, в том числе использованию веб-шрифтов.
02. Просмотр библиотеки
Библиотека Typekit включает в себя около тысячи различных шрифтов, классифицированных по свойствам, сфере применения и размерам. Используйте быстрый просмотр, чтобы ознакомиться с полным выбором доступных шрифтов. Как только вы будете готовы начать выбор шрифтов для вашего сайта, переходите к следующему шагу.
03. Создание нового набора
Нажмите на кнопку вызова меню, расположенную в верхнем правом углу страницы, и выберите пункт «Добавить новый набор». Данный набор будет доступен для вашего доменного имени. Далее введите информацию о домене, на котором вы планируете его использовать, и нажмите кнопку «Продолжить» для создания набора.
04. Установка JavaScript
Typekit предоставляет два блока JavaScript, которые нужно установить на каждой странице вашего сайта, где будут использоваться веб-шрифты. Они добавляются в раздел <head> страницы - не <body> . По возможности JavaScript должен быть прописан в точке загрузки страницы.
05. Выбор шрифта
Как только вы выбрали шрифт, который хотели бы использовать, наведите курсор мыши на его превью, чтобы увидеть различные способы его использования. Некоторые шрифты доступны также для использования на вашем компьютере, для этого можно воспользоваться специальной бета-версией программы. Нажмите на ссылку «Использование шрифтов», чтобы продолжить.
06. Добавление набора
Во всплывающем диалоговом окне выберите набор, в который вы хотели бы добавить шрифт. Вы также можете проверить совместимость выбранных шрифтов с InDesign, Photoshop, Illustrator и другими программами, установленными на вашем компьютере. Для выбора набора из созданных ранее нужно открыть новое окно.
07. Выбор дополнительных настроек
При использовании шрифтов в интернете содержимое этого шрифта загружается в браузер каждого посетителя сайта. Если у вас задана установка на загрузку всех символов в полном объеме, это может быть довольно большой поток данных. В Typekit существует возможность выбора дополнительных настроек для объема и состава набора, что позволяет существенно снизить нагрузку.
08. Добавление классов и хранилищ шрифтов
По умолчанию Typekit устанавливает перечень классов CSS, которые можно применить к элементам, и таким образом задается тип выбранных вами шрифтов. Вы можете добавить и свои собственные классы, используя панель в верхнем левом углу редактора наборов.
Вы также можете указать альтернативные шрифты для использования в данном стиле CSS. Для этого нужно заполнить форму в нижней левой части панели.
09. Опубликуйте набор и приступайте к работе
Как только вы удачно справились со всем вышеперечисленным и добавили дополнительные шрифты, которые хотели бы использовать на своем сайте, просто нажмите на кнопку «Опубликовать», и ваш набор будет доступен для использования. Активация может занять несколько минут, после чего вы увидите, что ваш сайт теперь располагает набором красивых шрифтов от Typekit.