top_banner_tthovespro
Главная Блог Как быстро определить шрифт на сайте: 4 способа

Как быстро определить шрифт на сайте: 4 способа

Как быстро определить шрифт на сайте: 4 способа

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

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

Зачем знать, какой шрифт используется на сайте?

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

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

Как быстро определить шрифт на сайте: 4 способа

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

Как узнать название шрифта на сайте

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

Это может быть:

  • Расширение для браузера;
  • Поиск названия в коде страницы;
  • Поиск шрифтов по изображению с помощью онлайн-сервисов;
  • Определение шрифта в Adobe Photoshop.

Давайте подробнее остановимся на каждом из них.

Браузерные расширения

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

Как быстро определить шрифт на сайте: 4 способа

Fonts Ninja

Браузеры: Chrome, Firefox, Safari.

Сайт: https://www.fonts.ninja/

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

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

Кстати, на официальном сайте Fonts Ninja используется бестселлер студии TypeType — TT Norms® Pro.

Как быстро определить шрифт на сайте: 4 способа

WhatFont 

Браузеры: Chrome, Safari.

Сайт: https://www.whatfontis.com/

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

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

Кроме перечисленных выше расширений, дизайнеры используют CSS Peeper и TypeSample и другие. У каждого свои дополнительные функции, поэтому мы рекомендуем протестировать несколько и выбрать наиболее удобный.

Ручной поиск в коде страницы

Как быстро определить шрифт на сайте: 4 способа

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

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

Чтобы сделать это в браузерах Chrome и Firefox, кликните на текст правой кнопкой мыши и выберите пункт выпадающего меню с просмотром кода, затем найдите закладку «Elements», затем «Styles», в котором будет код font-family.

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

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

Как быстро определить шрифт на сайте: 4 способа

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

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

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

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

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

Определение шрифта в Adobe Photoshop

Как быстро определить шрифт на сайте: 4 способа

Вы можете определить шрифт на изображении, используя Adobe Photoshop. Функция «Подбор шрифта» постоянно совершенствуется, но на данный момент поддерживает не все языки. 

Чтобы воспользоваться функцией, вам нужно:

  1. Выделить текст на изображении, используя инструмент «Прямоугольная область»;
  2. Кликнуть на пункт «Текст» «Подбор шрифта»;
  3. В списке похожих шрифтов выбрать наиболее подходящий.

Бонус: приложения для смартфонов

Как быстро определить шрифт на сайте: 4 способа

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

На данный момент популярны WhatTheFont и Find My Font. Чтобы определить понравившийся шрифт, достаточно открыть приложение и навести камеру на изображение. Из списка похожих шрифтов вы сможете выбрать наиболее подходящий.

Вместо выводов

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

Последние публикации

Шрифт с широким размахом: спецпроект к двадцатилетию SHIFTBRAIN

В 2023 году японское маркетинговое агентство SHIFTBRAIN запустило интерактивный сайт, посвящённый двадцатилетию компании. Для этого проекта команда TypeType разработала уникальный вариативный шрифт, способный экстремально растягиваться по горизонтали. За основу мы взяли бестселлер TT Norms® Pro, который уже использовался в качестве корпоративного шрифта компании — вы можете увидеть его на основном сайте SHIFTBRAIN.

Узнать больше
Буквы с татарским колоритом: история создания шрифта для территориального бренда Альметьевска

Брендинговое агентство Sensesay и студия TypeType создали TT Almet Origin — шрифт для нового бренда Альметьевска. Он стал уникальным голосом города (а позже — и всего юго-востока Татарстана). В статье рассказываем обо всём по порядку — от исследования до создания фирменного шрифта в рамках брендинга города.

Узнать больше
Панграмма: что это такое, виды, применение и полный список примеров

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

Узнать больше
Жирные шрифты: как использовать их в дизайне

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

Узнать больше
Оптимизация шрифтов: ключ к мгновенной скорости загрузки веб-сайта

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

Узнать больше
Шрифты печатных машинок: от ретро-механики к цифровой классике

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

Узнать больше
Пиши, обрезай: 10 лучших шрифтов для Cricut в 2025 году

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

Узнать больше
Лучшие и популярные шрифты для мемов: как правильно выбирать и использовать

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

Узнать больше
Ещё больше «ивишности»: как фирменный шрифт онлайн-кинотеатра Иви обрёл пару

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

Узнать больше

Узнать больше

Шрифты для верстки книги: как выбрать лучший

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

Узнать больше
УниверситеТТ: Урок 1. Классификация шрифтов

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

Узнать больше
Онлайн-магазин TypeType: оплата банковскими картами для вашего удобства

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

Узнать больше
Моноширинные шрифты в дизайне и программировании

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

Узнать больше
К 120-летнему юбилею Колмогорова: шрифт, воссозданный из почерка учёного

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

Узнать больше
Лигатуры в шрифтах: создание эсцет

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

Узнать больше
Веб-шрифты: как выбирать и использовать шрифты на сайте

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

Узнать больше
15 лучших современных шрифтов без засечек для вашего дизайна в 2025 году

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

Узнать больше
С первого взгляда: стильные шрифты для заголовков и акциденции

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

Узнать больше