Сервис шрифтов онлайн: Кириллические шрифты | Шрифты онлайн

Топ-10 лучших сервисов подбора комбинаций шрифтов

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

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

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

Font Combination Tool

В качестве слогана здесь указана интересная фраза – “типографика говорит до того, как вы прочитаете написанное”. Именно так можно охарактеризовать идеальное сочетание шрифтов. Работает здесь все максимально просто – вам лишь нужно выбрать один из вариантов из выпадающего списка, после чего откроется страница с примерами его использования с разным текстом (на светлом и темном фоне). Также в нашей статье про Font Combination Tool найдете дополнительный бонус с 10тью удачными комбинациям заголовок+текст.

Font Joy

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

Font Combinations Library

Это библиотека построена на базе Гугло шрифтов, которые совместимы с программами Adobe XD и Sketch. Здесь можно не только найти все популярные варианты, но и «поиграться» с настройкой разных параметров отображения текста: стиль, цвет, размер и многое другое.

Font Pair

Это еще один бесплатный сервис для подбора сочетаний Гугл Fonts с возможностью быстрой загрузки найденного решения. Он предлагает разнообразные фильтры для ускорения поиска: Sans-Serif / Serif, Display / Serif, Monospace и т.д. На сайте также есть обширная коллекция уже готовых комбинаций!

Генератор шрифтовых пар Canva

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

Mixfont

Данный проект был создан командой дизайнеров и разработчиков, которые отлично ориентируются в теме. С помощью специального генератора в нем автоматически формируются и визуализируются различные пары шрифтов. Mixfont предлагает 1000 уникальных фонтов, из которых реально получить около 600 тысяч комбинаций! Здесь вы точно найдете то, что искали.

Typ.io

Ресурс Typ.io содержит почти 3 тысячи примеров из реальных веб-проектов и приложений, среди которых 100% найдется удачная комбинация для любой задачи и тематики. Сначала вы выбираете одну из категорий материалов, дальше открывается список с конкретными шрифтами, и вы переходите к предварительному просмотру понравившегося вам варианта. На скриншоте увидите, как именно и насколько удачно сочетаются разные шрифты, а под ним будет CSS-код для внедрения у себя на сайте.

Google-Type от Femmebot

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

Комбинатор шрифтов Typotheque

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

Typespiration

Ресурс Typeinpiration позволяет просматривать готовые дизайны сайтов с потрясающими комбинациями шрифтовых и цветовых палитр. К каждому из примеров прилагается не только информация об используемых названиях фонтов и кодах цветов, но и HTML/CSS исходники, которые вы можете скопировать прямо на свой сайт. Интересный по реализации и идее проект.

Пакеты шрифтов Adobe

Эти примеры от Adobe представляют собой профессиональные подборки шрифтов, отлично сочетающихся между собой. Они сгруппированы по нескольким категориям: меню, путешествия, 90-тые и др. Имейте ввиду, что для доступа ко всему этому добру вам понадобится учетка Adobe Creative Cloud.

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

лучший бесплатный сервис подбора шрифта онлайн

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

В самое верхнее окошко нужно ввести любой фрагмент текста, как говорят некоторые «написать шрифтом онлайн» )). Можно просто набрать текст на клавиатуре либо вставить его из буфера обмена. Сервис прекрасно понимает кириллицу, в отличие от многих остальных, что безусловно играет ему только в плюс.

Вот какие параметра шрифта Вы можете задавать и сравнивать:
— семейство
— размер
— высота строк
— расстояние между буквами
— выравнивание
— расстояние между словами
— украшения (верхнее-нижнее подчеркивание, перечеркивание)
— цвет букв
— цвет фона

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

Выбор шрифтов для сравнения и подбора здесь действительно впечатляет! Весь список шрифтов делится на ряд групп:

• safe list (эти шрифты безопасно использовать на сайтах)
• Win default (дефолтные системные Windows)
• Mac default (дефолтные системные Mac)
• Windows Vista (шрифты Windows Vista)
• Google fonts (шрифты Google)

Более того, Вы всегда можете выбрать для сравнения иное семейство шрифтов из огромного списка. Для этого служит окошко «… or specify your own». Вот за что я люблю данный онлайн сервис подбора шрифтов! ))

Семейство и необходимые параметры шрифта Вы подобрали. Что же дальше? Как сделать так, чтобы перенести все настройки, к примеру, на сайт? Всё делается легко и просто!

В закладке «tools» справа от окошка ввода текста найдите строку «Get CSS for: 1st 2nd 3rd column». Допустим, Вам больше всего нравится, как выглядит текст во второй колонке. Тогда нажимайте «2nd» и в отдельном окошке браузера появится стиль для шрифта, который надо просто скопировать в файл css.

ВСЁ! Те, кто в курсе, поймут, как много времени это экономит! ))

Друзья, сервис TypeTester – это лучшее, что я встречал для того, чтобы сделать подбор шрифта онлайн быстро и эффективно. Это однозначный «must have» для всех, кто занимается дизайнерской работой, особенно в сфере веб-дизайна!

Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.

ТОП-7 лучших сервисов для генерации

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

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

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

Особенности выбора

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

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

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

В каких же случаях может понадобиться генерация красивой надписи таким способом:

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

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

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

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

Основные характеристики

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

Для упрощения этого процесса основные технические характеристики представлены в таблице ниже.

С учетом всех особенностей можно подобрать для себя максимально подходящий сайт.

Online-letters.ru

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

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

Перейдите на главную страницу сайта, прокрутите ее вниз, и определите необходимую вам группу шрифтов.

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

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

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

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

Fonts-online

Еще один простой русскоязычный сайт, по функционалу схожий с предыдущим.

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

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

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

Откроется список шрифтов в данной группе, а справа окажется поле для ввода текста. Введите нужную вам фразу и сгенерируйте надпись.

• Широкое разнообразие шрифтом;
• Некоторая возможность подстройки надписи под свои требования;
• Стабильная и быстрая работа сервиса.

• Большое количество рекламы;
• Мешающие текстовые инструкции;

Отсутствие тонких настроек надписей.

Олег: «Часто требуются такие шрифты для верстки макетов. Однажды здесь же подобрал шрифт для татуировки».

Textgenerator

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

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

Далее просто введите нужную вам фразу в соответствующее поле.

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

Positives

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

• Неудобная система выбора шрифтов;
• Сервис не слишком подходит для генерации надписей для картинок, макетов, печатной продукции;
• Оптимизация сервиса под работу со шрифтами для документов.

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

Ffont

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

Прост в управлении и оптимизирован под создание надписей именно для картинок.

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

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

Позитив:

• Большое количество шрифтов;
• Возможность их настройки;
• Оптимизация под работу именно с изображениями, а не документами;
• Возможность создавать подборки.

• Не слишком удобный интерфейс сайта;
• Сложная система поиска подходящих шрифтов;
• Большое количество таргетинговой рекламы.

Антон: «Неплохой сервис. Привык им пользоваться, так как и по функционалу и по количеству шрифтов устраивает».

Tattoografika

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

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

Сервис работает полностью бесплатно, достаточно удобен и функционален.

Прокрутите немного вниз главную страницу сайта – там вы увидите поле ввода текста и настройки его параметров.

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

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

Позитив:

• Полная оптимизация именно под создание эскизов для татуировок;
• Удобная система поиска шрифтов;
• Возможность достаточно широкой настройки шрифта.

• Надпись нельзя скопировать в документ как текст;
• Не слишком удобная система скачивания результата;
• Не особенно широкая система параметров настройки текста.

Марина: «Я тату-мастер, и использовать такой сайт для меня гораздо проще и быстрее, чем разрабатывать эскизы вручную. Тем более, что система настройки параметров позволяет сделать каждую надпись уникальной».

online-letters.com

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

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

Нажмите Далее и выберите тот шрифт, который нравится вам больше всего.

Снова нажмите Далее – в результате будет создана надпись, которую вы сможете скачать в формате картинки на следующей странице сайта.

Позитив:

• Большое количество шрифтов;
• Возможность оптимизации размера будущей надписи под свои параметры;
• Достаточно удобная система управления и навигации на сервисе.

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

Инга: «Достаточно удобный сервис – попеременно пользуюсь и им, сервисом на российском домене».

Flamingtext

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

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

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

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

На последнем шаге вы получите картинку, которую можно скачать в формате psd.

Позитив:

• Действительно широкий диапазон настройки текста;
• Очень большое разнообразие цветов, оттенков, градиентов;
• Удобная система скачивания картинок.

Негатив:

• Не все шрифта оптимизированы под кириллицу;
• Основной рабочий интерфейс не переведен на русский язык;
• При значительном увеличении размера надписи, для ее сохранения в таком виде требуется платный доступ к премиум аккаунту.

Светлана: «Когда только начинал бизнес именно здесь я создал свой первый логотип. До сих пор иногда пользуюсь этим сайтом».

Вывод

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

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

Однако в случае, если вы работаете с текстовыми документами и вам приходится копировать надпись в текст напрямую, то лучшим вариантом будет textgenerator. Этот сервис генерирует надпись в текстовом формате. И в этом его основное отличие от остальных сервисов, генерирующих ее в формате картинки.

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

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

Источник

15 сервисов для подбора шрифтовых пар

Шрифт является важной частью дизайна – правильно подобранный шрифт может сделать сайт более удобным для пользователей, кроме того, хороший читаемый шрифт способен украсить любой графический проект. Но при подборе шрифтов нужно учитывать множество нюансов, особенно, когда в проекте используются более двух различных начертаний. Если дизайнер считает, что в работе необходимо использовать более одного шрифта, то он должен помнить, что ему придется потратить много времени для поиска гармонично сочетающихся между собой гарнитур. Можно ли как-нибудь ускорить этот процесс? Да, можно, если использовать инструменты и сервисы для подбора шрифтовых пар. С помощью этих инструментов можно очень быстро определиться с основным шрифтом и сразу же найти шрифт, который будет являться дополнительным. Большинство этих инструментов очень просты в использовании, однако они не гарантируют, что предложенные варианты шрифтов идеально впишутся в ваш проект. В этом вопросе дизайнер должен в значительной мере полагаться на собственный опыт и вкус и использовать веб-сервисы для подбора шрифтовых пар как проверочный инструмент.

GOOGLE TYPE

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

TYPE GENIUS

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

JUST MY TYPE

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

BLENDER

Blender является очень удобным инструментом по выбору подходящих шрифтов для своего проекта. Все работает очень просто – нужно выбрать фрагмент текста, например, заголовок, подзаголовок или абзац и указать название шрифта. Результат изменений отобразится в том же окне. Таким образом можно быстро найти шрифты, которые будут хорошо смотреться вместе.

FONT COMBINATOR BY TYPOTHEQUE

Сервис Font Combinator by Typotheque позволяет подбирать шрифтовые пары путем перетаскивания нужного начертания непосредственно в текст. В отличие от других подобных инструментов, здесь есть поддержка кириллицы, что не может не радовать. Все, что нужно сделать пользователю – это выбрать шрифт и перетащить его мышкой на заголовок или в основной текст. Выбор шрифтов предлагается небольшой, но зато все они хорошо сочетаются между собой.

TYPE CONNECTION

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

FONT PAIR

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

TYPE WOLF

На сайте Typewolf.com можно найти множество интересных шрифтовых пар, которые украсят любой дизайн. Все примеры носят рекомендательный характер, окончательный выбор остается все же за дизайнером. Выбор шрифтовых пар невелик, но зато на сайте можно найти множество подборок с советами по выбору шрифтов, к примеру, там есть подборки с альтернативами таким популярнейшим семействам, как Helvetica или Futura.

TYP.IO

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

FONT COMBINATOR

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

ADOBE TYPEKIT

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

TYPESPIRATION

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

FONT IN USE

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

THE ART OF COMBINING FONTS

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

THE ART OF MIXING TYPEFACES

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

На этом все, спасибо за внимание!

Источник

как определить шрифт по картинке онлайн

Содержание

WhatTheFont – определение фонта онлайн

Сервис «WhatTheFont» — один из совсем немногих ресурсов, позволяющих определить кириллические шрифты онлайн. Ресурс обещает поиск в более чем 130 тысячах различных шрифтов, их быструю идентификацию и возможность их приобретения (в случае платных аналогов).

Для работы с сайтом выполните следующее:

1. Кликните на надпись «or click here to upload the image» для загрузки изображения на ресурс;

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

3. Просмотрите найденные совпадения;

4. При необходимости вы можете приобрести такой шрифт, нажав рядом на надпись «Get it».

Настройка шрифтов для сайта в зависимости от тональности

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

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

1. Полужирный заголовок и нормальный текст

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

Для каких сайтов подойдет: для любых.

Пример: Страница вакансии. В примере используются шрифты: Open Sans (для заголовков) и Roboto (для текста).

2. Жирный заголовок и нормальный текст

Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

Пример: Сайт коворкинга. В примере используются шрифты: Ubuntu (для заголовков) и PT Sans (для текста).

3. Жирный заголовок и тонкий текст

Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль

Пример: Страница дизайн-студии. В примере используются шрифты: Noto Sans (для заголовков) и Open Sans (для текста).

4. Тонкий заголовок и тонкий текст

Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.

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

Пример: Лэндинг мобильного приложения для обработки фотографий.

Специализированные ресурсы

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

What font is

Этот спецресурс предлагает свои услуги на бесплатной основе, функционирует довольно оперативно, но может работать лишь с латинским написанием. Распознавание кириллицы ему не удается. Алгоритм действий будет такой:

• во-первых, переходите на стартовую страничку сервиса;
• во-вторых, загружаете картинку, кликнув по кнопочке Upload image containing the font, можно еще вставить ссылку на нее в интернете;

• в-третьих, жмете «Find a font»;
• в-четвертых, выбираете, начать распознавание без изменений или допустимое изменение цвета, устанавливаете конкретную область;

выбираете дополнительные параметры фото (уровень яркости, угол поворота, контраст), так сервису легче буде определить шрифт и тапаете «Use image»;

расставляете буквы в нужных местах, повышая вероятность распознавания, жмете Continue;

наконец, выбираете необходимый вариант из перечня на мониторе.

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

WhatTheFont

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

открываете страничку и загружаете изображение с текстом;

выбираете поле, где расположился текст, жмете стрелочку;

получаете результаты поиска, где найдете то, что нужно.

Для успешного распознавания необходимо соблюдать такие условия: размер картинки около 360 х 275 пикселей, расширение – PNG, либо JPG, высота буквы не менее 100 пикселей. 

• Yandex поиск по картинке с телефона: как быстро найти то, что нужно
• Качественные программы, позволяющие изменить видео формат
• Как изменить формат видео online: лучшие сервисы
• Как опубликовать фото с компьютера в сервисе Instagram
• Самые популярные сервисы для временной почты без регистрации

 Identifont

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

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

Bowfin Printworks

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

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

TypeNavigator

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

Основные достоинства сервиса – объемная база данных и функция, позволяющая определять символы даже на не очень четком изображении.  Недостаток – низкая скорость определения (может занимать около 30 минут).

Специальные сервисы

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

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

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

What font is

Ресурс What font is позволяет опознать шрифты с картинки бесплатно и достаточно быстро, но работает только с латиницей.

Попытка распознать кириллицу, скорее всего, будет неудачной.

Порядок действий для пользователя ресурса следующий:

• Открыть главную страницу сервиса.
• Загрузить на сайт изображение, щёлкнув по форме с надписью Upload image containing the font или вставив ссылку на картинку в Сети.

Рис. 1. Загрузка изображения на сервис What font is.

• Нажать на «Find a font».
• Выбрать, будет ли распознаваться изображение без изменений или при распознавании будет выполнено реверс цветов, а также установить определяемую область.

Рис. 2. Выбор реверса цветов.

Рис. 3. Настройки изображения.

Рис. 4. Расстановка букв.

Рис. 5. Список подходящих шрифтов.

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

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

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

 Важно: Для работы с изображением оно должно иметь размер не больше 1,8 МБ и формат JPEG, GIF или PNG. Также рекомендуется распознавать только одну строку за раз – если шрифтов несколько, выделяется часть картинки. 

WhatTheFont

Ещё один способ распознать шрифты – перейти на сайт сервиса WhatTheFont и воспользоваться уже его помощью.

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

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

Действия пользователей должны быть следующие:

Рис. 6. Начало работы с сервисом – загрузка изображения.

Рис. 7. Выбор области распознавания.

Рис. 8. Результаты поиска.

 Важно: Для распознавания требуется выполнение определённых условий: размеры картинки должны быть в пределах 360 х 275 пикс., формат – PNG или JPG. Также рекомендуется, чтобы высота каждого символа была не меньше 100 пикселей. 

Identifont

Сервис Identifont позволяет добиться необходимого результата, ответив на целый ряд вопросов.

В процессе такой проверки пользователь должен сравнивать характеристики распознаваемого шрифта с выдаваемыми вариантами.

Рис. 9. Вопросы, задаваемые сервисом.

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

Bowfin Printworks

На сайте Bowfin Printworks можно найти значительное количество данных, касающихся различных шрифтов, и идентифицировать тот, который находится на картинке.

Работать с сервисом удобнее, чем с Identifont, но времени придётся потратить больше по сравнению с WhatTheFont.

Рис. 10. Главная страница ресурса Bowfin.

На сайте можно найти удобное руководство по самым популярным в дизайне вариантам шрифтов – таких как Serif, Sans Serif и Script.

Кроме того, есть возможность задавать вопросы владельцу сайта по поводу неопределённого набора символов.

Однако, если речь идёт о кириллице, результаты поиска вряд ли будут положительными.

TypeNavigator

Ресурс TypeNavigator предлагает собственный подход к поиску шрифтов.

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

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

Рис. 11. Варианты наборов символов, которые предлагает сайт TypeNavigator.

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

Недостатком можно назвать невысокую скорость определения – иногда на поиск нужного варианта тратится до получаса.

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

What Font is

Приложение What Font is использует тот же принцип, что и WhatTheFont. Загружаем картинку или адрес, отмечаем нужные буквы, и близкий вариант найден, хотя и не сразу:

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

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

Лучшие сервисы для определения шрифта по изображению онлайн

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

Сервис «WhatTheFont» поможет идентифицировать красивый шрифт

Сервис «WhatTheFont» — наверное, один из наиболее популярных англоязычных сервисов идентификации шрифта. Работа с сервисом довольно проста, и не требует от пользователя никаких специальных навыков (включая отсутствие процедуры регистрации).

1. Для работы с сервисом перейдите на сайт myfonts.com.
2. Нажмите на кнопку «Choose File» (выбрать файл), и выберите на жёстком диске вашего ПК картинку с нужным вам фоном.
3. Затем нажмите на кнопку «Continue».

Рабочее окно сервиса «WhatTheFont»

Сервис проведёт процедуру распознавания, и откроет вам экран, на котором вам предстоит определить, верно ли сервис распознал буквы (если нет, введите необходимые коррективы).

После этого нажмите на «Continue», и вы получите результат с предположительным названием нужного вам шрифта. Шрифты, названия которых окрашены синим цветом, вы можете скачать к себе на ПК (некоторые из таких шрифтов могут иметь платный характер).

Сервис «FontSquirrel» распознает буквы алфавита онлайн

Сервис «Font Squirrel» — ещё один англоязычный ресурс для поиска шрифта онлайн. Как и в случае с «WhatTheFont»  вы сможете не только возможность распознать нужный нам алфавит, но и сразу скачать его с базы данного ресурса (как бесплатно, так и за деньги).

1. Перейдите на сайт fontsquirrel.com, нажмите на кнопку «Upload image» и загрузите картинку с нужным вам шрифтом на ресурс.
2. Теперь разместите нужный для распознавания шрифта текст в специальной рамке (размер рамки регулируется, как и регулируется размер текста).
3. А затем кликните на кнопку «Matcherate It!».

Рабочее окно сервиса «FontSquirrel»

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

Bowfinprintworks.com – ещё один сервис с ответами на вопросы

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

Сервис «Fontmassive»

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

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

Расширение «WhatFont»

Расширение для браузера Google Chrome (а также для других браузеров на ядре «Chromium») под названием «WhatFont» позволит вам легко выполнить опознавание шрифта онлайн. После установки и активизации приложения в браузере будет достаточно навести курсор на нужный шрифт для идентификации последнего (опознаются как латинские, так и кириллические шрифты).

При этом, по отзывам пользователей, точность определения шрифта не всегда на высоте.

Расширение «WhatFont» в магазине Chrome

What The Font

Сервис What The Font

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

Удобство пользования и быстрота поиска   ̶   это также немаловажные критерии высокой оценки.

От вас требуется только ряд простых действий.

Порядок выполнения указан прямо на странице поиска.

Чтобы найти шрифт по картинке вам необходимо:

• Загрузить нужное изображение, нажав клавишу «Выберите файл». Сделать это можно с файлом, который уже хранится на вашем устройстве.
• Пройдите в папку, где хранится картинка и нажмите «Открыть».
• Чтобы перейти к следующему шагу используйте кнопку «Continue»;

Размер загружаемого снимка не должен превышать 2 Мб. Сам файл может быть PNG, JPEG и GIF формата.

• На этом этапе ресурс разделяет имеющийся на изображении текст на отдельные буквы. Если ему это не удалось, то вам нужно ему немного помочь и вставить соответствующие буквы под теми, что находятся на снимке. После завершения идентификации нажмите «Continue»;

  Нажимаем Continue

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

  Результаты поиска

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

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

• Соседние буквы в тексте не касаются друг друга;
• Используемые в шрифте символы имеют отчетливую форму;
• Текст должен быть горизонтально ровным настолько, насколько это возможно;
• Если это возможно, высота символом не должна быть около 100 пикселей.

Читабельность шрифта

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

Всегда обращайте на это внимание

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

Стиль, который применятся таким образом, поверх глобальных настроек, всегда будет приоритетным. Поэтому, если вдруг вы меняете параметры в настройках сайта, а изменения не видны, значит в этом месте применен «инлайновый стиль». Чтобы его убрать, нужно выделить текст и нажать иконку «очистить».

Пример 1: Текст читается не очень

Контрастность

Контрастность — один из основных признаков шрифта. Определяется отношением толщины соединительных и основных штрихов знаков. По этому признаку шрифты могут варьироваться от неконтрастных до сверхконтрастных.

ТОП-10 кириллических шрифтов Google fonts

1. Open Sans — безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.

2. Roboto — этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica. Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.

3. PT Sans — содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля.

4. Ubuntu — этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.

5. Arimo — данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.

6. Noto Sans

7. Play

8. Cuprum — универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.

9. Philosopher

10. Istok Web

Посыл сайта

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

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

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

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

Например, для семейной пиццерии, можно выбрать слова «профессиональный», «традиционный» и «семейный», значит, чтобы донести это через дизайн сайта лучше использовать:

• Черно-белые фотографии, для придания винтажности
• Темные и насыщенные традиционные цвета
• Классический курсивный шрифт с засечками

Или еще один пример: IT-стартап для инновационного приложения. Тогда посыл должен содержать слова «молодой», «амбициозный», «современный». Шрифт в таком случае будет уместен без засечек с жирными заголовками.

Как узнать и определить, какой шрифт на сайте?

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

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

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

Наконец, я нашла сервис, который настолько легко и быстро помогает определить шрифт, что невольно задаешься вопросом: как же все это время я о нем ничего не знала?

Знакомьтесь со своим будущим помощником – сервис “Fount”!

Чтобы вы могли использовать его в любой момент времени, нажимайте на “Fount” левой кнопкой мыши, и перетаскивайте на панель браузера. Видите на моей панели браузера белую иконку с надписью “Fount”? Точно так же он будет выглядеть и у вас, если ваш браузер – Google Chrome. В других браузерах, таких, как Safari, Google Chrome, Mozilla Firefox, Internet Explorer, начиная с 8-й версии и выше, этот сервис работает по такому же принципу. А вот владельцам браузеров Opera, Internet Explorer 7 и некоторых других, придется поискать какой-либо другой вариант.

Пошаговые действия

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

Нажимаем в браузере на иконку Fount, под мышкой появляется крестик, и нажимаем мышкой на участок текста, шрифт которого хотим определить. Посмотрите, в правом верхнем углу, появилась табличка с названием шрифта “PT Serif”. Вот таким легким способом, мы можем определить, какой шрифт на сайте нашего коллеги. А также, можно увидеть размер 17  пикселей, степень насыщенности и стиль.

Тренируемся здесь же!

Потренироваться вы можете на сайте Fount, нажимая на разные участки текста, и читая отображение в демонстрационной табличке. Это весьма занятно

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

Просмотры:
239

Вчетвером проникли в тыл врага и ликвидировали минометный взвод врага (видео)

Онлайн-сервисы

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

WhatTheFont

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

Порядок работы:

1. Откройте сайт.
2. В правом верхнем углу нажмите на надпись «WhatTheFont» и во всплывшем меню выберите «WhatTheFont», как показано на рисунке.
3. Перетащите изображение с искомым шрифтом в пунктирный прямоугольник или нажмите на подчёркнутый текст, чтобы выбрать его из галереи устройства.
4. После того как картинка будет загружена, программа предложит вам выделить шрифт для распознавания. Выделите нужную область и нажмите на синюю стрелочку.
5. Распознавание шрифта длится от нескольких секунд до минуты. После завершения поиска вам будет предложено несколько вариантов шрифтов на выбор. Выберите наиболее подходящий и скопируйте его название.
6. При желании можно сразу же приобрести понравившийся шрифт на сайте за определённую плату.

FONT IDENTIFIER от Font Squirrel

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

FONT IDENTIFIER качественно распознает и латинские, и русские буквы.

Чтобы определить название выбранного шрифта, сделайте следующее:

1. Зайдите на сайт. На горизонтальной панели меню выберите пункт «FONT IDENTIFIER».
2. Нажмите кнопку «Upload Image» и загрузите скриншот изображения.
3. Выделите текст для распознавания в специальную рамку. Для регулировки границ используйте левую кнопку мыши.
4. Нажмите кнопку «Matcherate It!», расположенную в нижней части окна, и дождитесь результатов.
5. Сравните предложенные варианты с первоначальной версией (она будет размещена в центре экрана).
6. Скопируйте название понравившегося шрифта в буфер обмена или сразу загрузите его с сайта.

На Font Squirrel представлены как платные, так и бесплатные шрифты.

Fontspring

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

1. Откройте страницу поиска.
2. Нажмите кнопку «Upload Image» и загрузите картинку для распознавания.
3. Выделите область с нужным текстом и нажмите зелёную кнопку «Matcherate It!».
4. После поиска сервис предложит несколько вариантов шрифтов, похожих на заданный. Выберите лучший.

IdentiFont

Работа сервиса IdentiFont несколько отличается от остальных. Он предлагает несколько вариантов поиска шрифта: по картинке или символу (Fonts by Picture), по имени дизайнера (Fonts by Designer), по внешним признакам (Fonts by Similarity), по части названия (Fonts by Name) или с помощью наводящих вопросов (Fonts by Appearance).

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

WhatTheFont

Самый известный способ определить шрифт с фотографии или скриншота — приложение WhatTheFont. Для распознавания нужно загрузить картинку или указать её адрес, программа выдаст наиболее похожие варианты из тех, которые можно купить на MyFonts. Создатели WhatTheFont пишут, что подходящее изображение выглядит так:

• текст расположен чётко горизонтально;
• высота букв не меньше 100 пикселей;
• буквы не касаются друг друга;
• общее количество символов — не больше 50.

Больше советов по подбору картинки можно прочитать в соответствующем разделе на сайте.

Попробуем найти шрифт Circe с этого снимка:

Как и другие онлайн-инструменты, WhatTheFont не распознает кириллицу. Поэтому выберем те буквы, которые в латинице и кириллице выглядят одинаково — в нашем случае это «М», «а», «р» и «е». Если приложение распознало букву неправильно, исправляем её в поле снизу.

В итоге программа сразу определила шрифт правильно

Если результаты далеки от нужного, стоит обратить внимание на теги справа — они помогут найти похожий вариант

Кто ваша аудитория и на каких языках она говорит?

«Услуга автоматического перевода повышает шансы, что кто-то увидит ваш контент на другом языке, почти до 100%», — говорит дизайнер Эбен Соркин, который в последние годы расширил свой шрифт Merriweather (показан выше) для поддержки большего количества европейских языков и кириллицы. «Наличие специфических глифов для их языков помогает угодить пользователям, — говорит Соркин. — Чем глобальнее ваша аудитория, тем более вероятно, что вы подумаете об этом»Если ваша основная задача — чтобы шрифт не менялся в максимальном количестве начертаний, рассмотрите возможность использования семейства шрифтов Noto (показано выше).AlegreyaMerriweatherNunitoRobotoQuattrocentoподдерживают кириллицуарабскихгреческихеврейскихбенгальское письмодевангаригуджаратитамильское письмотайского алфавитаGoogle Fonts

ТОП 10 лучших бесплатных шрифтов:

Roboto

Самый популярный шрифт в интернете с большим количеством вариантов толщины. Шрифт отлично воспринимается везде, поэтому и получил такую популярность. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Roboto

Open Sans

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

Шрифт Open Sans

Montserrat

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

Шрифт Montserrat

Roboto Condensed

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

Шрифт Roboto Condensed

Source Sans Pro

Еще один вариант современного шрифта для сайта. Прекрасно читается, имеет множество вариантов толщины. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Source Sans Pro

Oswald

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

Шрифт Oswald

Merriweather

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

Шрифт Merriweather

Noto Sans

Шрифт без засечек с простым дизайном букв. Имеет несколько вариантов толщины. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Noto Sans

Yanone Kaffeesatz

Еще один шрифт для ярких, запоминающихся заголовков. По легенде, создавался под стилизацию кофеен начала 20 века. Шрифт выглядит дорого и старомодно, прекрасно подойдет для сайта и дизайна полиграфии. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Yanone Kaffeesatz

Caveat

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

Шрифт Caveat

Онлайн сервис с каталогом бесплатных шрифтов

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

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

Большой каталог бесплатных шрифтов

Рад представить на Ваш суд онлайн сервис XFont, который поможет Вам подобрать шрифт на любой вкус и для любого вида работ. Только представьте, база сервиса уже содержит более 40 000 шрифтов, а в уникальности сомневаться не приходится, так как из этого множества порядка 24 тысяч являются оригинальными.

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

Простой         интуитивно-понятный  интерфейс сервиса XFont даёт возможность выбирать из русского, кириллического, граффити, рукописного или других шрифтов. Так, например, мне очень приглянулся красиво исполненный шрифт ShellyAllegroC Regular имеющий формат True Type Fonts и относящийся к семейству шрифтов ShellyAllegroC.

• Формат TrueType (ТруТайп) разработан фирмой Apple в конце 1980-х годов и хранит информацию o контуре символа (векторное изображение). Шрифты данного формата используются во многих операционных системах и имеют расширение «ttf».

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

Вместо послесловия

Мне кажется, этот онлайн сервис отличная находка для любого дизайнера и любителей поэкспериментировать с оформлением! После того как файл шрифта скачен, его потребуется установить в операционную систему, например, в Windows 7 это можно сделать нажатием правой кнопки мышки по файлу и нажатием «Установить» из контекстного меню (или двойным кликом по скаченному файлу, а после нажать кнопку «Установить»).

Красивый шрифт онлайн, написать им текст онлайн

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

Содержание статьи:

• Online-letters.ru — онлайн редактор надписи
• Gfto.ru — красивый дизайн текста
• X-lines.ru — сервис предоставляет большое количество шрифтов
• Cooltext.com — уникальные шрифты
• Fonts-online.ru добавляем текст удобно и быстро

Online-letters.ru — онлайн редактор надписи

Online-letters.ru – один из самых популярных сайтов с онлайн шрифтами в Рунете. Страница сайта имеет самое необходимое – то, зачем пришел посетитель, а именно красивые шрифты по видам и стилям. Попадая на главную страницу http://online-letters.ru, вы увидите перед собой виды шрифтов. Слева в блоке можно выбрать категории, например – печатный, gothic, сказочный. Чтобы написать текст онлайн шрифтом выберите один из разделов слева.

1. Откроется окно, в котором вам нужно вписать текст, который будет преобразован в выбранный вами шрифт. Подтвердите соответствующей кнопкой.
2. На следующей странице вы должны выбрать один из предлагаемых вариантов шрифта. Для этого пролистайте и ознакомьтесь со всеми вариантами, а после того, как определитесь с выбором, установите чекбокс напротив нужного шрифта.
3. Справа от шрифта появится синяя кнопка «Далее», нажмите на нее.
4. В следующем окне вам нужно выбрать цвет шрифта, размер и обводку букв и после нажать «Сгенерировать».
5. Откроется окно, в котором вы увидите готовый вариант вашей фразы и варианты ее получения. Вы можете скопировать ссылку для форума, для скачивания, для вставки в HTML-код. Если вы хотите просто скачать надпись на свой компьютер, выберите «Для скачивания», скопируйте ссылку (для этого выделите ее, нажмите правую кнопку мыши и выберите «Копировать».
6. Затем откройте новое окно, вставьте ссылку в адресной строке браузера, нажав CTRL+V и перейдите на нее. В открывшемся окне будет ваша надпись, нажмите правую кнопку мыши и выберите «Сохранить».

Рекомендую: Добавить текст на фото онлайн.

Gfto.ru — красивый дизайн текста

Сервис написания красивого текста онлайн – http://gfto.ru. Этот сайт предоставляет дополнительные возможности в виде фона текста, а также масштабирования поля вокруг текста и настройки наклона шрифта. Здесь вы можете выбрать красивый шрифт и украсить его специальными шаблонами, которых здесь также имеется большое количество на любой вкус. Для того, чтобы создать свою необычную надпись, перейдите на главную страницу сайта.

1. Выберите шрифт в соответствующем блоке.
2. В поле «Ваш текст» введите необходимые строки. Если вам достаточно только шрифта, нажмите кнопку «Сохранить текст» и графический файл в формате PNG Image сохранится в папку на вашем компьютере.
3. Если вы хотите дополнить вашу фразу необычными красками и другими дополнительными настройками, нажмите «Свой фон».
4. В этом разделе вы можете загрузить свой фон, нажав соответствующую кнопку внизу.
5. В окне «Ваш текст» введите фразу. Здесь же вы увидите другие настройки – размер, шрифт, размер области вокруг текста и др. Для применения и обзора одной из настроек, нажмите кнопку «Применить» внизу.
   Редактируем ширину и высоту текста в gfto.ru
6. В этом окне редактирования сохранить картинку можно, кликнув по ней правой кнопкой мыши и нажав «Сохранить» из выпадающего меню.

Читайте также: Как из видео сделать фото.

X-lines.ru — сервис предоставляет большое количество шрифтов

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

Перейдите на главную страницу сайта – http://x-lines.ru и выберите нужную категорию.

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

Cooltext.com — уникальные шрифты

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

Перейдя по ссылке https://cooltext.com/ на главную странице вашему взору открываются варианты готовых шрифтов, оформленных в виде логотипов. Для выбора других стилей, внизу вы найдете категории под заголовком «Generator categories».

• После выбора понравившегося, вы перейдете в раздел, где нужно написать текст для красивого шрифта.
• Здесь вы можете выбрать размер текста, задать градиент любых цветов, сделать шрифту тень, а также налаживать сверху слоя других текстов.
• После того, как вы определились с настройками и шрифтом, нажмите кнопку «Create Logo».
• Откроется окно, в котором будет несколько вариантов, «Download» — загрузить на компьютер, «Edit» — вернуться к редактированию надписи, «Get HTML» — получить ссылку для вставки логотипа в код Интернет-страницы, «Email» — отослать на ваш почтовый ящик.
• Ниже есть блок, в котором вы можете поделиться логотипом в популярных соцсетях, таких как: Facebook, Twitter, Google +.

Fonts-online.ru добавляем текст удобно и быстро

Данный сайт также предназначен для написания вашего текста красивым шрифтом – Fonts-online.ru. Он содержит огромную базу шрифтов различного направления, вида и стиля. Такому набору сайт обязан большинству пользователей, которые могут самостоятельно добавить на сайт новый шрифт. Все здесь имеющиеся шрифты поделены на латинские, кириллические, графические, рукописные, декоративные, граффити и т.д.

Здесь, как и в других подобных сайтах, вам необходимо лишь ввести фразу в специальное поле, и вы увидите свою фразу в нескольких десятках, а то и сотнях стилей начертания шрифта. Помимо этого на сайте https://www.fonts-online.ru/ вы можете скачать любой шрифт на свой компьютер и пользоваться им в любое время, с одним лишь условием, если шрифт распространяется без каких-либо ограничений. Зайдите на главную страницу сайта, чтобы создать свою надпись.

1. Чтобы создать текст красивым шрифтом онлайн, зайдите на главную страницу этого сайта.
2. С правой стороны, под блоком «Поделиться», в окне введите фразу, которую необходимо украсить интересным шрифтом.
3. Под окном ввода текста расположено два блока с выбором цвета. Один из них – цвет текста, другой – цвет фона. Выберите нужные цвета для будущего шрифта.
4. Еще ниже находятся разделы с шрифтами, также выберите подходящий.
5. На странице скачивания опустите страницу в самый низ, чтобы ввести проверочные цифры и нажмите кнопку «Скачать».

Обзор популярных служб встраивания веб-шрифтов — Smashing Magazine

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

В середине 80-х революция настольных издательских систем началась с появления Mac Plus, Aldus PageMaker и принтера Apple LaserWriter.Потребовалось довольно много лет, чтобы эти инструменты оказали влияние на мир дизайна и издательского дела, но как только они это сделали, оглядываться назад уже не было.

Дополнительная литература по SmashingMag:

Веб-службы шрифтов, такие как Typekit, а теперь и Google Font API, привлекли много внимания. Но за последние 3 месяца произошел взрыв новых услуг; такие сервисы, как Fonts Live, Fontdeck, Webtype и другие с сопряженными именами, включающими «Font» или «Type».

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

Typekit

Typekit, Inc. — популярный сервис веб-шрифтов от Small Batch Inc и основателя Джеффри Вина. Typekit был одним из первых сервисов на рынке и в настоящее время является одним из наиболее широко используемых сервисов на рынке.

Выбор шрифта 4000 (примерно половина из них осуществляется через библиотеку Typekit, а другая половина — через лицензионные соглашения с производителями, которые продают свои собственные веб-лицензии)

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

Плюсы Чрезвычайно простая установка для дизайнеров и разработчиков, позволяющая интегрировать в считанные минуты. Интеграция с Google Font API и платформами для ведения блогов, включая WordPress, Posterous и Typepad.Полная библиотека шрифтов доступна в большинстве планов по единой низкой цене, что позволяет клиентам пробовать разные шрифты на одном сайте, а также использовать разные шрифты в нескольких проектах. Теперь предлагает шрифты Adobe. Корпоративные клиенты могут размещаться самостоятельно, используя собственный CDN. Сервис позволяет размещать пользовательские шрифты. Простой бесплатный план не имеет срока действия.

Минусы Для реализации требуется JavaScript (хотя в блоге Typekit они перечисляют некоторые причины, по которым реализация на основе JavaScript имеет свои преимущества).Шрифты недоступны для настольного использования.

Стоимость Бесплатная пробная учетная запись включает использование 2 шрифтов на 1 веб-сайте. Платные планы начинаются с 24,99 долларов в год (2 сайта, 5 шрифтов на сайт). Более популярные планы позволяют использовать неограниченное количество шрифтов в неограниченных доменах.

Тарифы Годовая подписка

Наш опыт работы с Typekit

Настроить TypeKit довольно просто. Вы просто устанавливаете домены, которые хотите использовать (сайт бесплатной пробной версии включает один домен и до двух шрифтов), а затем создаете свой комплект, добавляя шрифты.Небольшой фрагмент кода JavaScript, вставленный в заголовок, извлекает всю необходимую информацию CSS. Вы также можете ссылаться на шрифты в своем собственном CSS и использовать подстановочные знаки при добавлении в список разрешенных доменов (например, * .domain.com будет работать на sub.domain.com).

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

Webtype

Webtype — это недавняя разработка Font Bureau, Ascender, DevBridge и экспертов по шрифтам Роджера Блэка и Петра Ван Блокланда. Webtype — это все о качестве, и он может похвастаться «шрифтами для онлайн-типографики высочайшего качества, включая шрифты, которые были разработаны с нуля специально для чтения с экрана».

Выбор шрифта 365

Преимущество перед другими услугами Качество шрифта

Плюсы Быстрая и простая установка.Гибкая ценовая политика. Возможность размещения пользовательских шрифтов, а также самостоятельного размещения. Интеграция без JavaScript. Доступна настольная лицензия.

Минусы Некоторые шрифты дороги по сравнению с другими службами веб-шрифтов.

Стоимость Бесплатная 30-дневная пробная версия для всех шрифтов. Шрифты начинаются с 10 долларов в год на сайт.

Тарифы Годовая подписка

Наш опыт работы с Webtype

Webtype было легко настроить и использовать с момента регистрации.Просто найдите и купите шрифты (для тестирования шрифтов доступна 30-дневная бесплатная пробная лицензия), а затем создавайте проекты. Выберите шрифт, который вы хотите использовать для каждого проекта, и вам будет предоставлен код ссылки и селектор CSS для каждого шрифта. Затем вы копируете и вставляете их в свои файлы HTML и CSS, и все готово.

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

Fontdeck

Fontdeck — относительно новая услуга от Clearleft и OmniTI. Он был задуман в марте 2009 года Джоном Таном и Ричардом Раттером как способ представить качественные шрифты широкой аудитории и уравнять правила игры для литейных производств. Он перешел в частную бета-версию в январе 2010 года и был открыт для публики в июне 2010 года.

Выбор шрифта 600, с планами удвоить это число до Рождества.

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

Плюсы Легко настроить. Доступные варианты. Автоматически включать шрифты аналогичного стиля в стек шрифтов. Чистый CSS без использования JavaScript.

Минусы Вариант самостоятельного хостинга недоступен. Шрифты недоступны для настольного использования.

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

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

Наш опыт работы с Fontdeck

Fontdeck было невероятно легко настроить. Хотя для этого действительно требуется ручная вставка селекторов CSS в таблицу стилей для вашего сайта (что предусмотрено дизайном, чтобы дать дизайнерам как можно больше контроля), он предоставляет код для этого немедленно, без дополнительного шага по настройке таблицы стилей ( ссылка будет готова, как только вы выберете добавление шрифта).Перед покупкой лицензии шрифт увидят первые 20 посетителей вашего сайта.

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

Еще одним дополнительным преимуществом от Fontdeck является то, что они включают шрифты аналогичного стиля в стек шрифтов на тот случай, если браузер пользователя не поддерживает @ font-face , а также для помощи с воспринимаемыми изменениями в тексте.Многие другие службы просто используют шрифт по умолчанию или обычные засечки / без засечек.

Fonts Live

Fonts Live — это новая служба веб-шрифтов от Ascender Corporation — компании, создавшей шрифты «Droid» для мобильной платформы Google Android, семейство шрифтов «Segoe» для Microsoft Windows и веб-шрифты для настольных компьютеров Ascender Fonts. хранить. Fonts Live похож на Webtype (оба были разработаны DevBridge), однако Fonts Live обслуживает шрифты исключительно от Ascender и его партнеров.

Выбор шрифта 499

Преимущество перед другими услугами Качество шрифта

Плюсы Гибкая ценовая политика. Доступна настольная лицензия. Возможность самостоятельного размещения веб-шрифтов. Интеграция с Google Font API. Интеграция без JavaScript. Теперь предлагаем шрифты Hallmark.

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

Стоимость Бесплатная 30-дневная пробная версия для всех шрифтов.Шрифты начинаются с 10 долларов в год на сайт.

Тарифы Годовая подписка

Наш опыт работы с живыми шрифтами

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

Мне больше повезло со вторым шрифтом, который я попробовал (Romany). На этот раз он создал ресурс без каких-либо проблем. Оттуда вы должны вставить ссылку на таблицу стилей («ресурс» в терминах Fonts Live) в свой заголовок, а затем вставить семейство шрифтов, стиль и толщину для любых элементов, которые вы хотите стилизовать.Плюс в том, что вы не столкнетесь с проблемами, связанными с вмешательством исходной таблицы стилей.

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

TypeFront

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

Выбор шрифта: НЕТ

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

Плюсы Недорого. Нет заметной задержки при отображении веб-шрифтов.

Минусы Вы должны предоставить свои собственные шрифты. Требуется четкое понимание лицензионного соглашения на шрифт.

Стоимость Бесплатный план предлагает 1 шрифт и 500 запросов в день.Платные планы начинаются с 5 долларов в месяц (австралийские доллары) и включают 10 размещенных шрифтов и 5000 запросов в день. 30-дневная пробная версия для всех платных планов.

Тарифы Ежемесячная подписка

Наш опыт работы с TypeFront

После регистрации учетной записи загрузка шрифтов становится простой задачей. Просто убедитесь, что у используемых шрифтов есть веб-лицензия. С этого момента вам нужно включить формат, который вы хотите использовать для шрифта (включая EOT, OpenType, SVG, TrueType и WOFF — по крайней мере, для шрифта, который я использовал).После включения одного из этих форматов вам необходимо добавить домены.

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

Fontspring

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

Выбор шрифта 1937 семей

Преимущество перед другими услугами Без периодической абонентской платы

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

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

Стоимость Бесплатно или до нескольких сотен долларов в зависимости от семейства шрифтов

Плата Единовременная плата

Наш опыт работы с Fontspring

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

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

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

Fonts.com Веб-шрифты

Веб-шрифты от Fonts.com — это новое предприятие Monotype Imaging, крупнейшего дистрибьютора шрифтов в Интернете. Fonts.com в настоящее время предлагает самый большой выбор веб-шрифтов, насчитывающий более 7500 шрифтов.

Выбор шрифта 7,500+

Преимущество перед другими услугами Большой выбор шрифтов

Плюсы В настоящее время самый большой выбор шрифтов в сети. Эксклюзивный дом для популярных шрифтов, таких как Helvetica, Frutiger и Univers. Поддержка более 40 языков. Используйте неограниченное количество доменов. Скачивайте до 50 настольных шрифтов в месяц с тарифным планом Professional. Интеграция без JavaScript доступна для подписчиков Standard и Professional.

Минусы Относительно дорого по цене за шрифт при использовании ограниченного количества веб-шрифтов. Интерфейс выбора шрифта медленнее среднего.

Стоимость Различные уровни от бесплатного до 500 долларов в месяц. На уровне бесплатного пользования у вас есть возможность использовать любой из 2000 шрифтов на неограниченном количестве веб-сайтов (до 25 000 просмотров страниц). Уровни Standard и Pro предоставят вам доступ к любому из более чем 7000 шрифтов. Все цены зависят от количества просмотров страниц.

Тарифы 30 дней

Наш опыт работы со шрифтами.com Web Fonts

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

Оттуда вы должны ввести каждый селектор CSS, для которого вы хотите использовать веб-шрифт, и выбрать шрифт, используемый для этого конкретного селектора, используя раскрывающееся меню, в котором перечислены шрифты, которые вы уже выбрали для проекта.Одно место, где действительно выделяется Fonts.com, — это варианты публикации ваших новых веб-шрифтов. Существует два разных варианта JavaScript — «Простой» вариант и «Расширенный», которые позволяют добавлять шрифты в селекторы непосредственно в вашей таблице стилей, а не только через веб-интерфейс, а также два варианта, отличных от JS (также « Легко »и« Продвинутый »).

Опять же, сайт Fonts.com в целом был немного медленным, но конечный результат был таким же быстрым и безупречным, как и любой другой сервис, перечисленный здесь.

Google Fonts

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

Выбор шрифта 60 (включая международные шрифты)

Преимущество перед другими услугами Бесплатно

Плюсы Легко реализовать.Быстрая загрузка шрифтов. Загрузчик веб-шрифтов Google позволяет использовать их службу с несколькими поставщиками веб-шрифтов.

Минусы Мелкий выбор шрифта в каталоге шрифтов Google. Нет поддержки iPhone или iPad (Mobile Safari). Теперь с поддержкой iPhone и iPad (Mobile Safari).

Стоимость Бесплатно

График тарифов N / A

Наш опыт работы с Google Fonts

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

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

Kernest

Kernest — это размещаемый или автономный (вы также можете использовать Fontue, механизм обслуживания веб-шрифтов Kernest с открытым исходным кодом) инструмент веб-шрифтов, который преобразует шрифты в готовые для веб-шрифтов форматы и образец кода.

Выбор шрифта 2,450

Преимущество перед другими услугами Большинство шрифтов бесплатные

Плюсы Механизм обслуживания веб-шрифтов с открытым исходным кодом. Большой выбор шрифтов.

Минусы Только самостоятельный хостинг, требующий дополнительных настроек и технических навыков

Стоимость Бесплатно или до 15 долларов США

График тарифов Единовременная плата

Наш опыт работы с Kernest

Kernest предлагает большой выбор бесплатных и платных шрифтов.Бесплатные шрифты можно установить без регистрации учетной записи. Просто найдите шрифт, который вы хотите использовать, убедитесь, что разрешения приемлемы для вашего предполагаемого использования (например, не каждый шрифт разрешено использовать на коммерческих сайтах), а затем скопируйте и вставьте ссылку и код CSS в свои файлы.

Kernest работает так же, как и любой другой на этом сайте, с минимальной задержкой перед загрузкой шрифтов.

Typotheque

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

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

Преимущество перед другими услугами Используйте на неограниченном количестве сайтов

Плюсы Возможность приобрести полную лицензию (веб и настольную).Поддерживается более 250 языков, из них можно встроить до 5 языков. Все шрифты являются эксклюзивными и разработаны Typotheque. Предлагает самостоятельный хостинг для крупных веб-сайтов.

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

Стоимость 20% от полной лицензии для настольных ПК (например, Fedra Sans Std Book: Полная по 90 евро, Интернет по 18 евро). Включает ежемесячную пропускную способность 500 МБ.

Тарифы Единовременная плата (5 евро за каждый дополнительный ГБ сверх 500 МБ)

Наш опыт установки Typotheque

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

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

WebINK

WebINK — это платформа веб-шрифтов, разработанная Extensis, компанией по разработке программного обеспечения, базирующейся в Портленде, штат Орегон, и специализирующейся на управлении шрифтами.

Выбор шрифта: 2,000

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

Плюсы Доступная структура ценообразования (аналогична Typekit).Достойный выбор шрифтов. Предлагает доступ как через обычный веб-интерфейс, так и через приложение для управления шрифтами рабочего стола под названием Suitcase Fusion 3 (Mac и Windows). Это приложение имеет режим предварительного просмотра веб-сайта для тестирования различных шрифтов и так называемое QuickMatch, которое находит наиболее близкое соответствие выбранному шрифту на вашем компьютере.

Минусы Непонятный интерфейс и бэкэнд. Каждый план ограничен 4 веб-сайтами (Примечание: каждый пользователь может настроить столько ящиков типов, сколько он хочет, что позволяет использовать 4 веб-сайта на ящик типов; так что на самом деле количество веб-сайтов ограничено только индивидуальным планом в рамках одной учетной записи пользователя. , в то время как количество ящиков типа не ограничено).

Стоимость Бесплатная 30-дневная пробная версия для всех шрифтов. Пакеты начинаются с 0,99 доллара в месяц (включает только «Рекламный» шрифт) для использования 1 ГБ и до 4 веб-сайтов.

Тарифы Ежемесячная подписка

Наш опыт работы с WebINK

Мы тестировали только веб-интерфейс для WebINK, а не для Suitcase Fusion 3. Сетевой интерфейс WebINK, вероятно, более запутан, чем другие перечисленные здесь. Сервис позволяет создавать неограниченное количество ящиков для шрифтов для различных проектов.Чтобы добавить шрифты из библиотеки в ящики для шрифтов, вам нужно нажать кнопку «добавить шрифты» в определенном ящике. Переход непосредственно к библиотеке шрифтов не позволит вам получить прямой доступ к своим ящикам, поэтому к этому нужно привыкнуть.

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

Font-Face

Font-Face недавно отказался от своего проекта после недавнего объявления Google Font. Однако, согласно их веб-сайту, они «вынашивают новый план», поэтому мы, возможно, еще услышим от них больше.

Как выбрать службу

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

• Насколько важен выбор шрифта? Есть ли какие-то конкретные шрифты, которые вам нужны?
• Насколько важно качество шрифта для вас и ваших клиентов?
• Требуется ли вам вариант самостоятельного хостинга?
• У вас или вашего клиента есть бюджет? Какая структура комиссионных сборов была бы идеальной?
• Важна ли поддержка iPhone и iPad (Mobile Safari)?

Веб-шрифты из Fonts.com — это новое предприятие Monotype Imaging, крупнейшего дистрибьютора шрифтов в сети. Fonts.com в настоящее время предлагает самый большой выбор веб-шрифтов, насчитывающий более 7500 шрифтов.

Выбор шрифта 7,500+

Преимущество перед другими услугами Большой выбор шрифтов

Плюсы В настоящее время самый большой выбор шрифтов в сети. Эксклюзивный дом для популярных шрифтов, таких как Helvetica, Frutiger и Univers. Поддержка более 40 языков.Используйте неограниченное количество доменов. Скачивайте до 50 настольных шрифтов в месяц с тарифным планом Professional. Интеграция без JavaScript доступна для подписчиков Standard и Professional.

Минусы Относительно дорого по цене за шрифт при использовании ограниченного количества веб-шрифтов. Интерфейс выбора шрифта медленнее среднего.

Стоимость Различные уровни от бесплатного до 500 долларов в месяц. На уровне бесплатного пользования у вас есть возможность использовать любой из 2000 шрифтов на неограниченном количестве веб-сайтов (до 25 000 просмотров страниц).Уровни Standard и Pro предоставят вам доступ к любому из более чем 7000 шрифтов. Все цены зависят от количества просмотров страниц.

Тарифы 30 дней

Наш опыт работы с Fonts.com Web Fonts

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

Оттуда вы должны ввести каждый селектор CSS, для которого вы хотите использовать веб-шрифт, и выбрать шрифт, используемый для этого конкретного селектора, используя раскрывающееся меню, в котором перечислены шрифты, которые вы уже выбрали для проекта. Одно место, где действительно выделяется Fonts.com, — это варианты публикации ваших новых веб-шрифтов. Существует два разных варианта JavaScript — «Простой» вариант и «Расширенный», которые позволяют добавлять шрифты в селекторы непосредственно в вашей таблице стилей, а не только через веб-интерфейс, а также два варианта, отличных от JS (также « Легко »и« Продвинутый »).

Опять же, сайт Fonts.com в целом был немного медленным, но конечный результат был таким же быстрым и безупречным, как и любой другой сервис, перечисленный здесь.

Google Fonts

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

Выбор шрифта 60 (включая международные шрифты)

Преимущество перед другими услугами Бесплатно

Плюсы Легко реализовать.Быстрая загрузка шрифтов. Загрузчик веб-шрифтов Google позволяет использовать их службу с несколькими поставщиками веб-шрифтов.

Минусы Мелкий выбор шрифта в каталоге шрифтов Google. Нет поддержки iPhone или iPad (Mobile Safari). Теперь с поддержкой iPhone и iPad (Mobile Safari).

Стоимость Бесплатно

График тарифов N / A

Наш опыт работы с Google Fonts

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

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

Kernest

Kernest — это размещаемый или автономный (вы также можете использовать Fontue, механизм обслуживания веб-шрифтов Kernest с открытым исходным кодом) инструмент веб-шрифтов, который преобразует шрифты в готовые для веб-шрифтов форматы и образец кода.

Выбор шрифта 2,450

Преимущество перед другими услугами Большинство шрифтов бесплатные

Плюсы Механизм обслуживания веб-шрифтов с открытым исходным кодом. Большой выбор шрифтов.

Минусы Только самостоятельный хостинг, требующий дополнительных настроек и технических навыков

Стоимость Бесплатно или до 15 долларов США

График тарифов Единовременная плата

Наш опыт работы с Kernest

Kernest предлагает большой выбор бесплатных и платных шрифтов.Бесплатные шрифты можно установить без регистрации учетной записи. Просто найдите шрифт, который вы хотите использовать, убедитесь, что разрешения приемлемы для вашего предполагаемого использования (например, не каждый шрифт разрешено использовать на коммерческих сайтах), а затем скопируйте и вставьте ссылку и код CSS в свои файлы.

Kernest работает так же, как и любой другой на этом сайте, с минимальной задержкой перед загрузкой шрифтов.

Typotheque

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

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

Преимущество перед другими услугами Используйте на неограниченном количестве сайтов

Плюсы Возможность приобрести полную лицензию (веб и настольную).Поддерживается более 250 языков, из них можно встроить до 5 языков. Все шрифты являются эксклюзивными и разработаны Typotheque. Предлагает самостоятельный хостинг для крупных веб-сайтов.

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

Стоимость 20% от полной лицензии для настольных ПК (например, Fedra Sans Std Book: Полная по 90 евро, Интернет по 18 евро). Включает ежемесячную пропускную способность 500 МБ.

Тарифы Единовременная плата (5 евро за каждый дополнительный ГБ сверх 500 МБ)

Наш опыт установки Typotheque

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

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

WebINK

WebINK — это платформа веб-шрифтов, разработанная Extensis, компанией по разработке программного обеспечения, базирующейся в Портленде, штат Орегон, и специализирующейся на управлении шрифтами.

Выбор шрифта: 2,000

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

Плюсы Доступная структура ценообразования (аналогична Typekit).Достойный выбор шрифтов. Предлагает доступ как через обычный веб-интерфейс, так и через приложение для управления шрифтами рабочего стола под названием Suitcase Fusion 3 (Mac и Windows). Это приложение имеет режим предварительного просмотра веб-сайта для тестирования различных шрифтов и так называемое QuickMatch, которое находит наиболее близкое соответствие выбранному шрифту на вашем компьютере.

Минусы Непонятный интерфейс и бэкэнд. Каждый план ограничен 4 веб-сайтами (Примечание: каждый пользователь может настроить столько ящиков типов, сколько он хочет, что позволяет использовать 4 веб-сайта на ящик типов; так что на самом деле количество веб-сайтов ограничено только индивидуальным планом в рамках одной учетной записи пользователя. , в то время как количество ящиков типа не ограничено).

Стоимость Бесплатная 30-дневная пробная версия для всех шрифтов. Пакеты начинаются с 0,99 доллара в месяц (включает только «Рекламный» шрифт) для использования 1 ГБ и до 4 веб-сайтов.

Тарифы Ежемесячная подписка

Наш опыт работы с WebINK

Мы тестировали только веб-интерфейс для WebINK, а не для Suitcase Fusion 3. Сетевой интерфейс WebINK, вероятно, более запутан, чем другие перечисленные здесь. Сервис позволяет создавать неограниченное количество ящиков для шрифтов для различных проектов.Чтобы добавить шрифты из библиотеки в ящики для шрифтов, вам нужно нажать кнопку «добавить шрифты» в определенном ящике. Переход непосредственно к библиотеке шрифтов не позволит вам получить прямой доступ к своим ящикам, поэтому к этому нужно привыкнуть.

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

Font-Face

Font-Face недавно отказался от своего проекта после недавнего объявления Google Font. Однако, согласно их веб-сайту, они «вынашивают новый план», поэтому мы, возможно, еще услышим от них больше.

Как выбрать службу

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

• Насколько важен выбор шрифта? Есть ли какие-то конкретные шрифты, которые вам нужны?
• Насколько важно качество шрифта для вас и ваших клиентов?
• Требуется ли вам вариант самостоятельного хостинга?
• У вас или вашего клиента есть бюджет? Какая структура комиссионных сборов была бы идеальной?
• Важна ли поддержка iPhone и iPad (Mobile Safari)?

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

Краткий обзор

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

Резюме

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

Связанные ресурсы

Раскрытие информации: Эту статью написали Эндрю Фоллетт и Кэмерон Чепмен. Эндрю предоставлял консультационные услуги для Ascender Corporation. Впечатления писал исключительно Кэмерон. Все факты были проверены и обновлены Луи Лазарисом.

Просмотр новых и популярных веб-шрифтов

веб-шрифтов | Fontspring

* Лимиты веб-шрифтов

Почти все семейства, предлагаемые на Fontspring, можно приобрести для неограниченного использования на веб-сайтах, которые вы собственный. Некоторые литейные предприятия предлагают лицензии с ограничением по количеству просмотров страниц для среднего и выше среднего веб-сайта. движение. Fontspring не требует установки скриптов отслеживания через Интернет. шрифты.Почти все наши веб-шрифты доступны с неограниченными лицензиями, и все наши лицензии бессрочные. Большинство наших ограничений по просмотрам страниц начинаются с полумиллиона … настолько высок, что неприменим к большинству веб-сайтов. Если ваш сайт получает более 500 000 просмотров страниц в месяц, вы можете приобрести более высокий лимит или неограниченную лицензию. Пределы могут быть отрегулировано в вашей тележке. Если вы не знаете, каковы просмотры страниц или какой лимит вам следует приобрести, вы можете прочитать наши ответы на часто задаваемые вопросы о просмотрах страниц.Обязательно свяжитесь с нами, если у вас возникнут вопросы.

Поддержка шрифтов браузера

По умолчанию Fontspring предоставляет файлов шрифтов WOFF и WOFF2 , новый стандарт использования в сети. При объединении в объявление @ font-face вы можете настроить таргетинг на все браузеры, перечисленные ниже.

• ✓ Internet Explorer 9+
• ✓ Firefox 3.6+
• ✓ Safari 5.1+
• ✓ Хром 5+
• ✓ Opera 11.5+
• ✓ iOS Safari 5.1+
• ✓ Android Brwoser 4.4+
• ✓ Chrome для Android

Пакеты веб-шрифтов

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

• stylesheet.css — Предварительно созданное объявление @ font-face с рекомендуемым синтаксисом.
• demo.html — Краткая страница, показывающая, как шрифт работает на странице HTML.
• WOFF / WOFF2 Fonts — Новый стандартный формат веб-шрифтов.

Если вам нужна поддержка старых браузеров, вы все равно можете получить пакеты веб-шрифтов, которые включают старые шрифты такие форматы, как TTF, EOT и SVG .Для большинства клиентов, использующих эти старые веб-шрифты форматы больше не нужны.

Если вам нужна помощь в установке веб-шрифтов, посетите наш раздел справки.

Диапазон символов

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

Качество визуализации шрифтов

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

Лицензия веб-шрифтов

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

веб-шрифтов: как заставить их отлично работать в электронной почте

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

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

В этой записи блога я выделю:

Веб-шрифты и веб-безопасные шрифты

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

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

Веб-безопасные шрифты

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

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

Очевидные веб-безопасные шрифты:

• Arial
• Helvetica
• Вердана
• Грузия
• Times New Roman

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

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

Веб-шрифты

веб-шрифтов извлекаются с сервера — либо с сервера, который вы размещаете самостоятельно, либо с внешнего (например, Google или Adobe).Из-за этого разнообразие шрифтов, которые можно использовать, намного больше, и их можно использовать на любом компьютере … при условии, что браузер или почтовый клиент может использовать шрифт. В некоторых случаях у вашего подписчика может уже быть Интернет шрифт загружен и установлен на их машину, поэтому эти шрифты будут работать даже в почтовых клиентах, которые не поддерживают веб-шрифты!

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

Почему веб-шрифты?

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

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

 "> 

 h2 {
семейство шрифтов: «Название шрифта», с засечками;
} 

 
 Шесть редакций прекрасны 
 

 

 href = "http: // fonts.googleapis.com/css?family=Lobster ">
  <стиль>
  h2 {
    семейство шрифтов: «Лобстер», с засечками;
    размер шрифта: 48 пикселей;
  }
 


   
 Шесть редакций - это прекрасно! 
 
 

Результат:

Скриншот вышеуказанного блока кода через Google Chrome 4.1

Сгенерированный текст («Шесть редакций прекрасны!») Представляет собой обычный текст HTML, поэтому вы можете добавить больше стилей в свой элемент стиля, если хотите (в нашем примере мы используем только один элемент: h2 ).

Запрос нескольких шрифтов с помощью Google Font API

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

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

В следующем примере URL-запроса загружаются все три шрифта (Vollkorn, Yanone и Droid Sans) за один запрос.

  Vollkorn  |  Yanone  |  Droid + Sans  

Теперь вы можете использовать любой из этих трех шрифтов в своих элементах стиля.

Обратите внимание на

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

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

Вес и стиль шрифта для шрифтов Google Font API

У веб-шрифтов также есть вариации веса / стиля шрифта. Чтобы использовать эти варианты, добавьте двоеточие (: ) к имени шрифта, а затем стили и веса.

В приведенном ниже примере мы запрашиваем вариант Vollkorn с полужирным шрифтом и курсивом и вариант Inconsolata с курсивом.

 http://fonts.googleapis.com/css?family=Vollkorn:  полужирный ,  полужирный  | Inconsolata:  курсив  | Droid + Sans 

Есть также шорткоды для вариаций каждого шрифта. Их:

• Жирный: b
• Курсив: i
• Полужирный курсив: bi

Вот пример использования коротких кодов:

 http: // шрифты.googleapis.com/css?family=Vollkorn:  b ,  bi  | Inconsolata:  i  | Droid + Sans
 

Обратите внимание на

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