Шрифты

Создаем свой рукописный шрифт.

Как это работает?

1. скачиваем шаблон в PDF или PNG,
2. используя бумагу, сканер и редактор забиваем таблицу своими рукописными буквами,
3. загружаем результат на сайт,
4. задаем имя шрифту и формат TTF или OTF (по сути разницы тут нет).

Сервис по распознанию шрифта.
Сайт на английском, но скорее всего всем будет понятно. Шрифт нужен также на латинице.
Заходим, Upload an image file: загружаем картинку с текстом нужного шрифта (желательно приличного качества с фоном одного тона.
Сайт разбивает текст на буквы и старается угадать буквы, предлагает свою версию, мы соглашаемся с его выбором или корректируем, пишем правильные буквы или символы, а затем получаем список шрифтов, на которые ваш похож.

Сайт задаст несколько напр. "какой хвостик у Q?".
Затем выдаст диаграммы, которые помогут выбрать ответ.

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

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

Как это работает

Можно выбрать отдельные алфавиты (более 100) или отдельные наборы, напр. эмодзи, стрелки, знаки валют, греческие буквы, звездочки, сердечки.

Инструменты

1. HTML-кодировщик - переводим текст в символы HTML, чтобы на всех сайтах корректно отображались и наоборот - переводим символы HTML в нормальный текст, - HTML-кодировщик
2. Переводим текст в символы Юникод и наоборот - \u042e\u043d\u0438\u043a\u043e\u0434,
3. Переворачиваем текст - ɯɔʞǝɯ wǝɐʚиҺɐdоʚǝdǝu,
4. Генератор таблицы символов Юникода - выбираем диапазон, формат вывода и получаем.

Таблица специальных символов онлайн.
Жмем на символ и он в буфере обмена. Можно насобирать несколько и скопировать за раз.
А потом вставить, где хотели.

Онлайн генератор шрифтов с иконками в формате Webfont.

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

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

Онлайн генератор шрифтов с иконками в формате Webfont.

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

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

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

1. Загружаем понравившийся нам шрифт на сайт.
2. Подтверждаем, что имеем право свободно пользоваться выбранным шрифтом (если шрифт с нашего сайта, то можете, они все бесплатные).
3. Получаем архив с
   • генерированными шрифтами для различных браузеров и мобильников,
   • сгенерированным файлом стиля CSS3,
   • код страницы с примером использования шрифта.

Коллекция бесплатных шрифтов для ваших сайтов.

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

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

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

Сайт для собрания шрифт из предложенных иконок или своих SVG.

Как это работает?

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

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

Сервис, чтобы можно было быстро скопировать ASCII символы.

Сервис по распознанию шрифта.
Очень похож на описанные выше.

Ограничения

1. на загрузку картинки - 1.8 Mb;
2. одной строки текста достаточно;
3. формат картинки jpg, gif или png;
4. можно задать фильтр, только бесплатные, только платные или все.

Сервис по внедрению шрифтов на сайт.
Русской версии нет, но есть русские шрифты (кириллические).

Преимущества

Что делать?

1. Script: - выбираем Cyrillic или Cyrillic Extended

2. Вверху в Preview Text: можно ввести свой текст, выставить размер (Size:) и отсортировать шрифты по алфавиту, популярности ... Я выбрал по популярности. Мы ищем самый лучший шрифт из менее популярных. Менее популярный - значит реже его используют и он будет оригинальнее.

3. Шрифт подбираем для заголовка (Sentence) или текста (Paragraph), в зависимости от того, как хотим использовать. Красивый шрифт для заголовка может быть не читабельным в тексте.

4. Выбираем шрифт, который нам больше всего подходит Add to Collection и Quick-use.

5. Берем код, который надо будет разместить в <HEAD>. Он в 3. Add this code to your website:, это ссылка вроде

   <link 
   href='https://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic' 
   rel='stylesheet' type='text/css'>

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

 font-family: 'Ubuntu Condensed', sans-serif;
  font-style: normal;
  font-weight: 400; font-size: 13px;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0em;
  word-spacing: 0em; line-height: 1.4;

Копируем его и вставляем куда нам надо в CSS. font-style: normal; font-weight: 400; font-size: 13px; text-transform: none; text-decoration: none; letter-spacing: 0em; word-spacing: 0em; line-height: 1.4;

Копируем его и вставляем куда нам надо в CSS.

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