Webfonts или локально загруженные шрифты?

Как протестировать шрифт?

Дизайнеры, не привыкайте видеть шрифты только сквозь окна фотошопа, графические редакторы используют свои методы сглаживания текстов, и вы можете быть обмануты красивой картинкой. Гораздо полезнее научиться тестировать и смотреть их в браузерах. Если есть демонстрационная страница, обязательно убедитесь, что при рендеринге не вылезают всевозможные артефакты и спайки. Есть еще такой инструмент как Typecast, где можно проверить многие шрифты, а потом показать страницу клиенту. Для тех, кто выбирает новый шрифт для уже готового сайта — незаменимый для вас сервис Web Fonts Previewer, вы сможете протестировать любой шрифт на живом работающем сайте, так, как будто вы уже его внедрили.

Как правильно установить

Здесь можно пойти двумя путями. Самый простой способ установки – вручную средствами ОС Windows. Компания Adobe также предлагает альтернативный метод инсталляция – с помощью облачного сервиса Typekit. Оба метода одинаково эффективны, поэтому выбор зависит от личных предпочтений пользователя.

Средства Windows

Это универсальный способ добавления новых шрифтов. После установки они станут доступны для всех программ так или иначе работающих с текстом, в том числе для Adobe Illustrator. Скачиваем шрифты и при необходимости распаковываем архив.

Для справки! Набор может включать себя файлы с расширением TTF или OTF. Последний формат более продвинут по части наполнения: поддерживает глифы, японские/китайские символы, лигатуры, полноценные дроби и т.п.

Установка в ОС Windows:

  1. Выделяем и копируем новые шрифты: Ctrl + C.
  2. Переходим в системную папку Windows, далее в каталог Fonts.
  3. Вставляем ранее скопированные шрифты: Ctrl + V.

Если шрифтов немного, то установить их можно с помощью контекстного меню. Достаточно выбрать нужный файл, нажать правую клавишу мыши и кликнуть по «Установить».

Установка через Microsoft Store:

  1. Открываем параметры системы нажатием на иконку шестерёнки в меню «Пуск».
  2. Выбираем раздел «Персонализация».
  3. Переключаемся на «Шрифты» в левой части интерфейса.
  4. В основной зоне кликаем на строчке «Получить дополнительный шрифты…».
  5. Выбираем понравившиеся и жмём «Установить».

После инсталляции средствами Windows программу Adobe Illustrator необходимо перезапустить. В ряде случаев, к примеру, с устаревшей модификацией ОС, потребуется перезагрузка всей системы. Иначе изменения не вступят в силу.

Adobe Typekit

Для загрузки шрифтов в Адоб Иллюстратор понадобится десктопное приложение Creative Cloud. Если последнее не установлено, то его следует загрузить с официального сайта компании: adobe.com/ru/creativecloud/desktop-app.html. Программа позволяет управлять всеми продуктами Adobe: обновлять, настраивать, синхронизировать и т.п.

Загрузка через Typekit:

  1. Запускаем Creative Cloud и переходим в раздел «Установки».
  2. В верхнем меню выбираем пункт «Шрифты».
  3. Ставим галочку на блоке «Синхронизация Typekit».
  4. Запускаем Illustrator.
  5. В основном меню кликаем по разделу «Текст» -> «Добавить шрифты из Typekit».
  6. Откроется браузер с официальной страницей сервиса.
  7. В меню сайта выбираем Upgrade.
  8. Определяемся с тарифным планом. Бесплатные решения также имеются.
  9. Переходим по меню Browse -> My Library.
  10. Кликаем на подходящий шрифт из представленного списка. Количество зависит от выбранного ранее тарифного плана.
  11. Нажимаем на кнопку Sync All для синхронизации с десктопной программой.

По окончанию синхронизации на странице отобразится соответствующее сообщение. Аналогичное уведомление всплывёт в программе Illustrator.

Для Windows

В качестве системных допускается устанавливать шрифты формата EOT или TTF. Выделите один или несколько файлов, щёлкните правой кнопкой и наведите курсор на «Установить». Инсталляция запустится автоматически после щелчка. Останется лишь дождаться завершения процесса.

Альтернативный метод немного сложнее и актуален для случаев, когда контекстное меню не содержит пункт «Установить» или надо добавить в ОС внушительное число шрифтов. Вначале зайдите в директорию Windows и перейдите в каталог Fonts. Потом переместите туда файлы. Больше никаких операций не требуется.

Попасть в каталог со шрифтами можно ещё 2 способами. Самый простой – нажмите WIN + R. Откроется окно для ввода команд. Скопируйте туда строку %windir%\fonts и кликните по кнопке ОК. Другой метод отнимает чуть больше времени – зайдите в «Панель управления» и найдите «Шрифты» в разделе «Оформление и персонализация».

В системной папке разрешается проводить манипуляции со шрифтами. Например, удалять или скрывать для отображения в приложениях. Если захотите ознакомиться с какими- либо наборами, щёлкните по кнопке «Просмотр» или 2 раза по интересующим файлам. Через секунду запустится специальная программа.

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

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

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

Этому шрифту — да, этому — нет

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

В то же время, существует огромное количество шрифтов и сервисов специально для Web. Вы можете так же лицензировать свои собственные шрифты на сайте MyFonts.com.

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

Встраивание бесплатных шрифтов

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

Ещё одна огромнейшая коллекция находится на ресурсе Font Squirrel. Тут вы можете скачать целый набор шрифтов, которые в последствии необходимо будет сконвертировать благодаря @font-face Kit Generator.

Перед тем как скачать шрифт, убедитесь в том, что шрифт может быть сконвертирован для веба!

Зачем размещать шрифты локально в WordPress?

Оптимизация загрузки шрифтов на сайте WordPress

Ничто так не замедляет работу веб-сайта WordPress, как слишком много внешних HTTP-запросов. Скорее всего, ваша тема ВордПресс содержит запросы шрифтов Google, которые предварительно загружаются разработчиком. При правильных условиях размещение Google Fonts локально на вашем собственном хостинге / сервере может уменьшить HTTP-запросы и время загрузки WordPress.Чем меньше запросов, тем быстрее время загрузки сайта ВордПресс.

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

С Google Fonts у вас также есть один дополнительный HTTP — запрос (к таблице стилей шрифтов Google) для поиска fonts.googleapis.com, чтобы получить файл CSS. Затем из этой таблицы стилей делается запрос на сам шрифт из fonts.gstatic.com для загрузки файлов шрифтов. Выполнение дополнительных HTTP — запросов на ваших сайтах требует времени. 

Google Fonts API устанавливает минимальный срок действия в 1 день для кеширования шрифтов. Вы не можете изменить это, поскольку Google создает файл CSS автоматически на основе нескольких факторов.

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

Когда вы размещаете локально, все запросы поступают из одного домена (вашего) и скорее всего, вам не понадобится другой файл CSS, поскольку он будет внутри файла CSS вашей темы WordPress. Плюс, вы добавите  параметр в запроса, для удовлетворения рекомендации PageSpeed, чтобы текст оставался видимым во время загрузки веб-шрифта.

Ускорьте загрузку сайта по рекомендациям Pagespeed Insights

В следующем разделе рассказывается, как вы можете сделать это на своем сайте WordPress. Самый простой способ оптимизировать и разместить шрифты локально на своем сайте WordPress — это бесплатный плагин OMGF WordPress

Добавление нового шрифта в Adobe Illustrator

Программа Illustrator может пользоваться всеми установленными в системе вариантами начертаний типа OpenType, Type 1, TrueType, Multiple Master, SVG, включая, комбинированные.

Также в Adobe Illustrator установить шрифт можно тот, что расположен в специальных папках:

  1. Programm Files > Common Files > Adobe > Fonts – система Windows;
  2. Library > Application Support > Adobe > Fonts – macOS.

Чтобы установить шрифт в Adobe Illustrator, пользователь может скачать подходящий файл с символами и добавить в указанную директорию. Самым простым способом контроля начертаний является собственный сервис компании Fonts.

Бесплатные шрифты

Шрифт не бывает бесплатным сам по себе, за его разработку всегда кто-то платит. Здесь вариантов может быть несколько.

1. За создание шрифта заплатила корпорация

Самый известный пример — коллекция Google Fonts, которую компания разрешает использовать и в личных, и в коммерческих целях.

В коллекцию входит, например, семейство шрифтов IBM Plex, разработанное американской компанией IBM как альтернатива популярному платному шрифту Helvetica Neue. Plex охватывает больше ста языков, в нём есть и кириллица.


Кириллица IBM Plex. Скриншот: IBM

Гарнитуры из коллекции Google Fonts распространяются по свободным лицензиям SIL Open Font License — её разработали специально для шрифтов — и Apache License, которая относится не только к шрифтам, но и другим компьютерным программам.

В коллекции Paratype 12 шрифтов, которые можно использовать бесплатно практически без ограничений. Компания запрещает только перепродавать их и сохранять модифицированный шрифтовой файл под оригинальным именем.

— Работу над шрифтом всегда кто-то оплачивает, иногда сама студия. Например, шрифты PT Sans и PT Serif частично финансировала Роспечать, а частично — мы сами. Набор PT Root UI Paratype оплатил полностью самостоятельно.

Вообще, у каждого шрифта своя история: так, разработку гротеска Golos заказала компания «Смена». Изначально шрифт хотели использовать только для государственных сайтов, но позже это решение изменили. Тогда мы вместе со «Сменой» решили распространять Golos бесплатно.

А шрифт Ambidexter стал бесплатным благодаря его автору — дизайнеру Егору Белозёрову.


Бесплатный шрифт Ambidexter. Скриншот: Paratype

Бесплатные шрифты разных студий можно найти на GitHub, авторы условно называют такие проекты open-source. Они не только открывают доступ к финальным файлам, но и приглашают представителей других систем письменности поучаствовать в создании шрифта, чтобы он стал мультилингвистическим.

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

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

Как установить новый шрифт в Adobe Acrobat

Программа работает с установленными глобально, загруженными с сервиса Adobe Fonts и с установленными по адресу “Adobe\Fonts” шрифтами. Если пользователь будет работать с готовым файлом, созданным с применением неустановленных символов, то Acrobat использует наиболее подходящую замену.

Универсальный способ добавить начертание в Windows

Можно установить начертание для всей системы Windows:

  • Первым делом нужно загрузить файл со шрифтом на компьютер. Для большинства подобных файлов используется расширение “ttf” или “otf”, но также коллекции символов иногда загружают архивом. В случае если скачанный файл заканчивается на “zip”, “7z”, “rar”, то его нужно извлечь при помощи специальной программы.Последние версии Windows способны запустить процесс установки начертания из любой директории, для этого можно использовать двойной клик мышкой по соответствующему файлу.
  • В системе Microsoft Windows есть папка, где расположены системные файлы и настройки. Как правило, следует перейти на диск “С”, где должна находиться папка “Windows”. Если в используемой системе на этом диске нет искомой директории, то система установлена на другой диск и следует искать его.
  • Внутри “Windows” нужно найти папку “Fonts” и добавить туда файлы со шрифтами. Вставить их можно используя стандартные опции копировать и вставить. Однако для внесения изменений в эту часть системы требуются права администратора. Можно воспользоваться командной строкой. Системная папка, содержащая доступные символы, будет открыта по команде %windir%fonts. В нее нужно перетащить загруженные файлы. Этот способ удобен тем, что не нужно искать директорию. Командная строка открывается сочетанием клавиш “Win + R” или через меню “Пуск”.

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

Сохранение файла с использованием уже установленного шрифта

Еще один способ того, как установить шрифт в Adobe Acrobat:

  • Запустить приложение, затем выбрать определенный PDF файл при помощи опции “Открыть” из меню “Файл”.
  • Активировать окно настроек печати, сделать это можно кликнув по иконке с изображением принтера. В этом окне вместо принтера нужно выбрать опцию “ PDF”, после чего нажать кнопку “Properties”. Откроется окно дополнительных настроек. Здесь на вкладке “ PDF Settings” нужно установить параметр “HD high quality print” в графе “Default Settings”.
  • После этого нужно нажать кнопку “Edit”. Новое окно содержит вкладку “Fonts”, где требуется найти нужный стиль текста.
  • Дважды нажать “ОК” и один раз “Print”. Документ будет сохранен с новыми настройками.

Использование Adobe Fonts и Creative Cloud

Универсальный способ загрузить шрифты для любого продукта Adobe – это использовать сервис Adobe Fonts. В нем расположено большое количество разнообразных начертаний символов из разных письменных систем. Для использования сервиса требуется регистрация, а полный функционал доступен по подписке.

Установленная на компьютер программа Creative Cloud позволит использовать выбранные начертания локально, даже когда отсутствует подключение к интернету. Creative Cloud подходит для Windows и macOS.

Для загрузки набора символов следует:

  1. В окне программы перейти на вкладку поиска, которая обозначена символом “f”. Там, через поисковую строку или фильтры отобрать подходящие варианты. Отфильтровать можно по нескольким параметрам одновременно: указать толщину линии, подходящий класс, ширину символа. Помимо букв здесь есть также орнаменты.
  2. Для добавления нужно перейти на страницу семейства символов и нажать кнопку “Активировать”.
  3. После этого можно управлять символами во вкладке “Мои шрифты”. Здесь можно найти все активные и ранее установленные символы.

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

Здесь же можно удалить неиспользуемые начертания. Во вкладке “f” нужно нажать на кнопку с троеточием. Появится меню, состоящие из двух пунктов. Выбор первого пункта избавит пользователя от неиспользуемых символов, второго – от всех установленных. Если шрифты были удалены случайно, то их просто можно будет восстановить. Можно просматривать и возвращать по одному или восстановить сразу все.

В последних версиях продуктов компании в поле выбора стиля текста есть кнопка “Больше шрифтов Adobe Fonts”, которая переадресует пользователя на страницу одноименного сервиса.

Как добавить начертания для Adobe Reader

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

Посмотреть набор использованных символов можно на вкладке “Шрифт”, попасть на которую можно через опцию “Свойства” из меню “Файл”. Добавление символов аналогично описанным для Acrobat способам. Можно использовать Adobe Fonts или вставить необходимые файлы в папку “Fonts”.

Практическое руководство:

Самым простым способом добавить наборы символов для пользователей ОС Windows является редактирование содержимого папки “Fonts”. Этот способ универсален для большинства программ. Его просто и удобно использовать. Но одно серьезное ограничение может стать препятствием: пользователь должен обладать правами администратора. На рабочем месте сотрудники, за исключением IT отдела, не могут пользоваться привилегированным доступом к системным настройкам.

Второй способ, который подходит для всех продуктов компании, а также некоторых текстовых редакторов и офисных приложений – это использование Adobe Fonts. Чтобы воспользоваться этой опцией, нужен аккаунт, оформленная подписка и установленная локально программа Creative Cloud. Работа с начертаниями для людей, использующих данный сервис, значительно упрощается.

Шрифты

Google Fonts

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


Сервис с бесплатными шрифтами Google Fonts.

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


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

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

Fontstorage

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

Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны 492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.


Так выглядит инструмент Font Playground: на настройку стилей ушло три минуты.

Free Faces

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

Верстка и сетка самого сайта оставляют приятное впечатление.

Wordmark.it

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


Так выбирать фирменный шрифт гораздо легче.

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

Typeface

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

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

В лицензированной версии программы вы можете сравнивать гарнитуры, создавать шрифтовые пары, настраивать трекинг, экспортировать шрифты по проектам и тегам или создавать презентации для клиентов в формате .pdf. Лицензия стоит1 429 рублей.


Простой и минималистичный менеджер шрифтов для компьютеров на macOS.

Fontbase

Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.

Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит3 доллара в месяц, или 29 долларов в год.

Fontbase помогает быстро и эффективно управлять шрифтами.

Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?

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

И можно было бы вовсе отказаться от стандартных шрифтов, тем более, что многие мобильные ОС их не поддерживают (например, Arial, Taһoma, Verdana и Georgia). Но, к сожалению, индустрия, много лет подгоняемая под 96 DPI экраны и джорджии-верданы, оказалась не совсем готова к быстрым переменам, и на старых ОС Windows до сих пор возникают проблемы с отображением нестандартных шрифтов из-за особенностей механизма растеризации.

У меня на компе есть шрифт, можно ли его использовать на сайте?

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

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

Нужен ли веб-шрифтам хинтинг?

Хинтинг — это специальные инструкции, которые жестко привязывают абстрактные кривые шрифта к пикселям на мониторе. Абсолютное большинство шрифтов (в том числе коммерческих) — не хинтованные, потому что это довольно трудоемкая и сложная процедура. Для TrueType и PostScript хинтинг выполняется по-разному. Если вы берете дешевый шрифт, безопаснее формат OTF, потому что в TT процедура осталась неизменной со времен черно-белого растрирования и не совсем адекватная, а для PS процедура проще, и у автора есть возможность сделать автоматический хинтинг.

Шрифт без хинтинга при растрировании становится замыленным, а высота букв может скакать.

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

В ОС Windows мы видим, пожалуй, самый радикальный подход: такие популярные шрифты как Tahoma, Verdana, Arial и Georgia были отхинтованы специально под GDI ClearType, и когда появился DirectWrite, пришлось перехинтовывать и обновлять основные шрифты в комплекте ОС.

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

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

Советы по использованию шрифтов Google в WordPress

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

1. Выберите шрифт, который подходит вашему сайту

Raleway придает тесту стильность ар-деко, Merriweather обладает легкостью, а Playfair Display может похвастаться журнальной / печатной атмосферой. Спросите себя, какой стиль воплощает ваш бренд, и подберите шрифт, согласно вашей концепции.

2. Сформируйте творческую структуру

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

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

3. Ограничьте свои стили шрифта

Как видите, некоторые из представленных шрифтов имеют до 18 стилей. Однако, если у вас так много вариантов, это не значит, что вам нужно использовать их все. Как правило, рекомендуется использовать только три – обычный, жирный и курсив. Слишком много шрифтов может привести к замедлению вашего сайта. Выбирая шрифты из Google, вы можете указать, какие стили вы хотите включить, чтобы избежать загрузки слишком большого количества файлов и снижения производительности сайта.

4. Помните о читабельности

Всемирная организация здравоохранения пришла к выводу, что около 1,3 миллиарда людей живут с нарушениями зрения. Многие из них пользуются Интернетом, и ваша задача, сделать ваш сайт доступным и для них. Тем не менее, даже те, кто не принадлежит к этой группе, предпочитают сайты, на которых глазам будет комфортно.По этой причине при отображении шрифтов на вашем сайте важна читабельность. Например, выбор неоновых цветов в Comic Sans – плохой вариант. Убедившись, что ваш шрифт приятен для чтения, вы сможете сделать свой сайт более дружелюбным для всех ваших пользователей. Одна из самых важных вещей – это контраст, который вы можете проверить с помощью этого инструмента.

5. Если у вас есть уникальный шрифт, разместите его на сервере

Чтобы попытаться улучшить производительность, можете разместить шрифт локально на вашем сервере. Если вы используете шрифт Google, то это делать не нужно, поскольку серверы Google обычно очень быстро реагируют. Однако есть и другие причины для размещения файлов шрифтов на вашем сервере, в том числе и новые правила GDPR. Пплагин CAOS for Webfonts | Host Google Fonts Locally станет отличным решением для обоих случаев.

Adobe Illustrator

Adobe Illustrator можно сравнить по популярности с вездесущим Photoshop. Последний является универсальным инструментом, тогда как «Иллюстратор» – это по большей части программа для верстальщиков.

Функционал утилиты заточен на векторную графику. Если «Фотошоп» работает с фотографией и другими растровыми материалами, то Illustrator – это сплошь кривые линии. Векторам задаются конкретные координаты и в результате они превращаются в рисунок.

Одно из явных преимуществ векторных изображений перед пиксельными – вес файла

Такие картинки занимают значительно меньший объём на носителе и гораздо быстрее загружаются, что особенно важно при вёрстке веб-страниц.. Учитывая векторный формат отрисовки, в «Иллюстраторе» очень удобно работать с символами

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

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

Основные направления программы:

  1. создание логотипов любой сложности;
  2. иллюстрации для сайтов, социальных сетей, видео и прочих digital-проектов;
  3. иконки;
  4. изометрические проекты;
  5. инфографика;
  6. макеты для печати.

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

В каких форматах должны быть файлы шрифта?

Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах:

TTF или OTF — привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;WOFF — незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2-2,5 раза легче, чем исходные;EOT — внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8 кроме TrueType кривых, поддерживаются и PostScript);SVG — для поддержки браузера Safari.

Сколько начертаний шрифта можно использовать в вебе?

С точки зрения дизайнера, много начертаний — это круто. И действительно, для заголовочка — Bold, а вон там, для врезочки — ExtraLight, ненужные текстики вообще запихнем и запрессуем в Condensed Bold. Вот оно — настоящее богатство и стилистическое разнообразие. Но когда все это «богатство» начинают переносить на сайт, выясняется, что все жутко тормозит. И лучше даже не пытаться открыть такой сайт с мобильного устройства. А еще, не забываем, что каждое начертание стоит отдельных денег, и вполне вероятно, что заказчик попросит вас или найти шрифтовой синоним, или уменьшить количество начертаний, только бы не покупать всю дорогую гарнитуру. Нормально использовать максимум 2-3 начертания одной или разных гарнитур.

Что такое Canva

Canva — это кроссплатформенный сервис для создания графических дизайнов. Он был разработан еще в 2013 году. С тех пор он претерпел множество изменений, и в нем появилось много полезных функций.

Создание образа в этом сервисе в основном основано на том, что вы комбинируете готовые элементы и различные изменяемые шаблоны.

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

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

Покажите мне код

После того, как мы сохранили файл в localStorage, этому методу необходим код только на клиентской стороне. Вот, возьмите:

<head>
...
<script>
(function(){
    function addFont() {
        var style = document.createElement('style');
        style.rel = 'stylesheet';
        document.head.appendChild(style);
        style.textContent = localStorage.sourceSansPro;
    }

    try {
        if (localStorage.sourceSansPro) {
            // The font is in localStorage, we can load it directly
            addFont();
        } else {
            // We have to first load the font file asynchronously
            var request = new XMLHttpRequest();
            request.open('GET', '/path/to/source-sans-pro.woff.css', true);

            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    // We save the file in localStorage
                    localStorage.sourceSansPro = request.responseText;

                    // ... and load the font
                    addFont();
                }
            }

            request.send();
        }
    } catch(ex) {
        // maybe load the font synchronously for woff-capable browsers
        // to avoid blinking on every request when localStorage is not available
    }
}());
</script>
...
</head>

Можно ли конвертировать веб-шрифты?

Что бы вам ни говорили, нельзя просто переконвертировать файл и сохранить исходное качество шрифта, особенно, если изначально он был в формате OpenType. В процессе есть шанс потерять какие-то данные, вшитые в файл шрифта (скомпилированные инструкции, дополнительные знаки, метрики). Вы заметите это, когда при конвертации файл неожиданно «похудеет», особенно некошерно конвертировать TrueType в PostScript и обратно.

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

Conclusion

Finding the perfect font for your designs can be like looking for a needle in a haystack. However, it doesn’t have to be. While there are plenty of resources for choosing the right font, Typekit is a fine option for adding high-quality fonts to your website. It’s essentially a proverbial box of needles sitting in your drawer – far away from the hay, and easily accessible for enhancing your site’s design.

What’s more, adding Typekit fonts to WordPress is remarkably easy – and you can do it in two ways:

  1. Use the Typekit Fonts to WordPress plugin.
  2. Add Typekit’s embed code to your WordPress header.php file.

What do you think makes Typekit stand out among other font repositories? Subscribe and share your thoughts with us in the comments section below!

Article thumbnail image by howcolour / shutterstock.com

Как загрузить свой шрифт в Canva

Чтобы загрузить свой шрифт, вам необходимо приобрести подписку на Canva. Для загрузки шрифтов вам понадобится одна из следующих версий Canva: Canva Pro, Canva for Enterprise, Canva for Education и Canva for Nonprofits.

Если вы уже выбрали платную подписку, вот что вам нужно сделать дальше:

  • Нажмите на значок своего аккаунта или фотографию в левом верхнем углу главной страницы Canva.
  • Далее необходимо проверить, в правильной ли команде вы находитесь. Если вам нужно изменить ее, воспользуйтесь разделом «Сменить команду».
  • Затем на главной странице нажмите кнопку Brand Kit на боковой панели.
  • Если вы являетесь пользователем Canva for Enterprise, сначала щелкните название своей компании на боковой панели, а затем перейдите на вкладку Brand Kits.
  • Кроме того, если у вас есть несколько наборов брендов, вам нужно будет выбрать тот, который вы хотите настроить.
  • В разделе Brand Fonts нажмите на кнопку Upload Font. Поддерживаемые форматы для сервиса Canva — OTF, TTF и WOFF.
  • Далее вам нужно будет выбрать файл для загрузки с вашего компьютера. Указав нужный файл, нажмите на кнопку Открыть.
  • Помните, что вы можете загружать только те шрифты, на которые у вас есть лицензия.
  • Далее вас спросят, есть ли у вас права на использование шрифта, Нажмите «Да, загрузить! «, чтобы подтвердить это.
  • Затем вам останется только дождаться завершения загрузки. Во всплывающем окне будет показано, была ли загрузка успешной или нет.

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

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: