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

SVOEMEDIA.SPACE

Шаблоны для Тильды

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

⚡️⚡️⚡️ EARLY BIRDS КУРС ⚡️⚡️⚡️ «КАК СОСТАВИТЬ РАБОТАЮЩИЙ КОНТЕНТ-ПЛАН»

Подробнее

ИП КОЛТАШОВА АЛЕКСАНДРА ВАДИМОВНА

Свидетельство о гос. регистрации: 54 № 5 150 134
ИНН: 540 618 483 335
ОГРНИП: 316 547 600 156 201
Дата постановки на учет: 25 августа 2016
Р/с: 4080 2810 5045 0000 0701
БИК: 44 525 999
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
К/с: 3010 1810 8452 5000 0999

ООО СВОЕМЕДИА

ИНН: 5405047736
КПП: 540501001
ОГРН: 1195476069887
Р/с: №40702810004500006839
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
БИК: 044525999
К/с: 30101810845250000999

Этот сайт использует куки. Без них никак. Подробнее…

ок

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

Как определить, какой шрифт на сайте? После того, как вы нашли вдохновение на чужом сайте, приступаем к идентификации

Александра Иващенко, стратег SVOEMEDIA
@alexandra_molodec

Последнее обновление: март 2020

дизайн

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

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

1. Расширение для браузера

2. Смотрим в коде страницы

И что, больше никак?

1. Расширение для браузера

Для каждого браузера есть свои расширения, способные определить шрифт сайта. Например, я в Google Chrome использую расширение от Typ.io. Установить его в браузер можно по этой ссылке. После установки в правом нижнем углу появится серый квадрат с буквой «Т» посередине, при клике на который вы сможете узнать, какие шрифты используются на текущей странице сайта. Также можно выделить часть интересующего текста и нажать на «+» рядом с кнопкой «Т»: вуаля, приложение определило шрифт фрагмента.

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

Еще расширения:
Fontface Ninja (Google Chrome, Firefox, Safari),
WHATFONT TOOL (Google Chrome, Safari),
Typesample (Google Chrome).

UPDATE 2019: В последнее время я использую в работе расширение для Хром — CSS Pepper. Оно позволяет не только видеть названия установленных на сайт шрифтов, но и все цвета (их HEX можно скопировать) и картинки (их можно сохранить). Рекомендую.

2. Смотрим в коде страницы

Кликаем правой кнопкой мыши в любом месте страницы интересующего сайта и выбираем «Посмотреть код» (или Ctrl+Shift+I для Google Chrome). Выделяем нужный фрагмент сайта и ищем атрибут font-family.

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

←На сайте используется шрифтовая пара Leksa + Futura, но загружены все шрифты как Leksa, поэтому определить Futura ни просмотр кода, ни сервисы не помогут. Ха-ха! :)

И что, больше никак?

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

Если хотите прибегнуть к дедуктивному методу — воспользуйтесь сервисом Identifont.