Как определить, что за шрифт на сайте?
Как определить, какой шрифт на сайте? После того, как вы нашли вдохновение на чужом сайте, приступаем к идентификации
Последнее обновление: март 2020
Перед вопросом «где взять шрифт», обязательно возникает вопрос — как его выбрать? Самый простой вариант — подсмотреть, какой шрифт используется на любимом сайте. После того, как вдохновение найдено, приступаем к идентификации.
Мы будем очень рады, если вы процитируете наш материал, но обязательно укажите активную ссылку на него. Спасибо!
Перед вопросом «где взять шрифт», обязательно возникает вопрос — как его выбрать? Самый простой вариант — подсмотреть, какой шрифт используется на любимом сайте. После того, как вдохновение найдено, приступаем к идентификации.
Мы будем очень рады, если вы процитируете наш материал, но обязательно укажите активную ссылку на него. Спасибо!
1. Расширение для браузера
Для каждого браузера есть свои расширения, способные определить шрифт сайта. Например, я в Google Chrome использую расширение от Typ.io. Установить его в браузер можно по этой ссылке. После установки в правом нижнем углу появится серый квадрат с буквой «Т» посередине, при клике на который вы сможете узнать, какие шрифты используются на текущей странице сайта. Также можно выделить часть интересующего текста и нажать на «+» рядом с кнопкой «Т»: вуаля, приложение определило шрифт фрагмента.
Кроме того, на сайте Typ.io можно найти вдохновляющую подборку шрифтов, используемых на разных сайтах. Англоязычных, правда. Поэтому после того, как вы выбрали свою шрифтовую пару, проверьте, поддерживают ли эти шрифты кириллицу.
UPDATE 2019: В последнее время я использую в работе расширение для Хром — CSS Pepper. Оно позволяет не только видеть названия установленных на сайт шрифтов, но и все цвета (их HEX можно скопировать) и картинки (их можно сохранить). Рекомендую.
2. Смотрим в коде страницы
Кликаем правой кнопкой мыши в любом месте страницы интересующего сайта и выбираем «Посмотреть код» (или Ctrl+Shift+I для Google Chrome). Выделяем нужный фрагмент сайта и ищем атрибут font-family.
Скорее всего, эти манипуляции помогут вам найти нужный шрифт. Почему скорее всего? Потому что разработчик может переименовать шрифт так, как ему вздумается, например, как это сделала я (почти бессознательно):
←На сайте используется шрифтовая пара Leksa + Futura, но загружены все шрифты как Leksa, поэтому определить Futura ни просмотр кода, ни сервисы не помогут. Ха-ха! 🙂
И что, больше никак?
Почему же, есть и другие способы, кратко назовем их «определение шрифта по картинке». Тут на помощь приходят специализированные сервисы, например WhatTheFont. А еще можно спросить у тех, кто знает, в группах в соцсетях, например здесь или здесь.
Если хотите прибегнуть к дедуктивному методу — воспользуйтесь сервисом Identifont.
ВАЖНО: Если вы собираетесь использовать найденный шрифт для коммерческих целей или публичной демонстрации — на него нужно купить лицензию.
Нужен свой контент-проект? Напишите нам
Тут подробнее о том, чем можем быть вам полезны✊
Это Саша Назмеева, она будет общаться с вами, когда вы напишете
Было полезно? Интересно? Поделитесь мнением здесь и в комментариях 🙂
Мы запустили SVOEMEDIA.SPACE
Пополняемая библиотека готовых шаблонов сайтов и блоков для Tilda Publishing, Figma, соцсетей, понятных инструкций и чек-листов от практиков
А в telegram — наша кухня от Саши Колташовой
Полезное для тех, кто ищет подрядчика
Как узнать шрифты, который используется на сайте?
Всем привет,
Изучаю, к примеры, я сайты. Понравились шрифты на некоторых. Можно ли как-то в коде или еще как-то (я нуб в этом деле) узнать шрифты, которые использовались на каком-то из сайтов?
Спасибо
-
Вопрос заданболее трёх лет назад
-
12555 просмотров
Сначала кликаешь правой кнопки мыши на текст, у которого ты хочешь узнать шрифт и нажимаешь «Просмотр кода элемента».
У тебя появится консоль, и справа ищешь font-family:
Пригласить эксперта
Есть волшебное расширение для Google Chrome What Font 
Я использую сервис который показывает список всех шрифтов используемых на странице:
capyba.ru/tools/fontfinder/
-
Показать ещё
Загружается…
20 мая 2023, в 12:39
10000 руб./за проект
20 мая 2023, в 12:16
10000 руб./за проект
20 мая 2023, в 12:13
100 руб./за проект
Минуточку внимания
Ежедневно просматривая Интернет, мы сталкиваемся с множеством веб-сайтов. О большинстве из них мы забудем после получения необходимой информации, а некоторые сайты выделятся из толпы красивыми шрифтами. Веб-сайт может использовать разные типы шрифтов, чтобы привлечь внимание читателей и предложить удобство для пользователей. Если вы блогер или дизайнер, вам также может быть интересно использовать аналогичный стиль шрифта на вашем веб-сайте или на веб-сайте вашего клиента. В этой статье мы объясним различные методы определения шрифта, который использует веб-сайт.
Связанный: Как узнать количество страниц на сайте?
Шрифты и сайты
Как правило, есть три способа использовать шрифты на любом веб-сайте.
- Самостоятельные пользовательские шрифты — на торговых площадках для покупок доступны довольно нестандартные шрифты. Кто угодно, купите и разместите эти шрифты на том же сервере, где также хранится контент веб-сайта.
- Сторонние шрифты, такие как Google Fonts — владельцы веб-сайтов могут легко использовать Google Fonts API и динамически вызывать шрифты с серверов Google для использования на своих сайтах. Это самая популярная форма в системах управления контентом, таких как WordPress, поскольку разработчики тем и плагинов будут использовать бесплатные шрифты Google.
- Использование системного стека — проблема с двумя вышеуказанными методами заключается в том, что загрузка файлов шрифтов повлияет на скорость загрузки веб-страницы в браузере. Использование системного шрифта по умолчанию заставит веб-сайт использовать настройки шрифта вашего компьютера. Это поможет повысить скорость работы веб-сайта, а также предложит читателям больше впечатлений.
Помните, что некоторые владельцы веб-сайтов могут загрузить шрифты Google и разместить их на своем собственном сервере. Независимо от того, какой тип шрифта использует веб-сайт, сайт должен включать шрифт в свой CSS (каскадная таблица стилей). Для сторонних шрифтов это будет внешний CSS, а для двух других вариантов следует использовать внутренний CSS сайта. Следовательно, вы можете легко найти семейство шрифтов, используя один из следующих методов, проверив код CSS.
Метод 1 — просмотр исходного кода страницы
Самый простой способ проверить шрифт, используемый на веб-сайте, — это проверить его исходный код.
- Откройте веб-сайт в Chrome или в своем любимом браузере.
- Щелкните правой кнопкой мыши и выберите в контекстном меню опцию «Просмотр источника страницы».
- На новой открывшейся странице нажмите «Control + F» в Windows или «Command + F» в Mac.
- Введите «шрифт» в поле поиска и нажмите Enter, чтобы найти слово в исходном коде.
- Если на веб-сайте используются шрифты Google или любые другие сторонние шрифты, вы можете найти соответствующие URL-адреса шрифтов в виде таблиц стилей CSS. Вот как это выглядит в исходном коде страницы:
- Как видите, используются два семейства шрифтов с сайта fonts.googleapis.com, который является API для сервера Google Fonts.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">- С помощью этой информации вы можете найти название семейства шрифтов, используемого на сайте.
Метод 2 — проверьте с помощью инструментов разработчика
Если на веб-сайте не используются сторонние шрифты, вы не увидите никаких таблиц стилей, включенных в исходный код страницы. В таком случае веб-сайт должен использовать либо пользовательские шрифты, либо использовать системный стек в таблице стилей веб-сайта. Самый простой способ изучить таблицу стилей веб-сайта — просмотреть любой источник HTML-элемента с помощью консоли разработчика браузера. Вы можете найти шрифт, используемый на веб-сайте, с помощью свойства CSS font-family.
- Когда вы находитесь на веб-странице, нажмите F11 в Windows для перехода в консоль разработчика. Если вы работаете на Mac, щелкните правой кнопкой мыши веб-страницу и выберите параметр «Проверить» или «Проверить URL-адрес», чтобы открыть консоль разработчика.
- Когда вы увидите инструменты разработчика, щелкните инструмент выбора элемента, а затем наведите указатель мыши на любой текстовый элемент на веб-странице.
- Вы можете увидеть всплывающее окно, показывающее детали элемента с деталями шрифта, как показано ниже.
- Однако получить полную информацию о шрифте сложно, так как строка будет обрезана во всплывающем окне.
- Вы можете просмотреть подробную информацию о CSS элемента в разделе «Стили» в консоли разработчика. Прокрутите вниз в разделе «Стили» и найдите, какой шрифт используется на сайте.
- Если вы видите зачеркнутую строку для свойства font-family для элемента body, прокрутите вверх и найдите активное семейство font-family для этого выбранного текстового элемента. По сути, это означает, что веб-сайт использует несколько шрифтов для разных элементов страницы.
- Если сайт использует собственные или сторонние файлы шрифтов, вы также можете проверить в разделе «Источники» консоли разработчика, чтобы найти исходное расположение шрифтов, загруженных на сайт.
Метод 3 — проверьте с помощью инструментов тестирования скорости страницы
Некоторые веб-сайты блокируют щелчок правой кнопкой мыши и просмотр исходного кода страницы и ограничивают доступ к инструментам разработчика. В этом случае вы не можете использовать два вышеуказанных метода, чтобы определить, какой шрифт использует веб-сайт. Однако вы можете использовать некоторые сторонние инструменты, такие как инструменты тестирования скорости страницы, чтобы найти CSS и ресурсы, используемые на сайте.
- Перейти к Инструмент измерения скорости страницы Pingom.
- Введите URL-адрес веб-страницы, на которой вы хотите найти семейство шрифтов.
- Нажмите кнопку «Начать тест» и подождите несколько секунд, чтобы получить результаты.
- Прокрутите вниз и проверьте раздел «Запросы файлов».
- Если на веб-сайте используются файлы шрифтов (собственные или внешние), вы можете найти HTTP-запрос в этом разделе.
- Используя эти данные, вы можете найти шрифты, используемые на протестированном сайте.
Метод 4 — используйте расширение браузера Chrome
Последний вариант — использовать расширение в браузере Google Chrome. Это поможет вам получить шрифт, наведя указатель мыши на текстовое содержимое на веб-странице после установки расширения.
- Откройте браузер Chrome и перейдите по URL-адресу команды «chrome: // apps /».
- Вы найдете список приложений и щелкните Интернет-магазин, чтобы перейти в раздел расширений Интернет-магазина Chrome.
- Введите «поиск шрифта» в поле поиска, чтобы отфильтровать релевантные расширения.
- Вы найдете несколько расширений и нажмите «Какой шрифт — найти шрифт».
- На следующем экране вы можете найти все сведения о расширении и нажать кнопку «Добавить в Chrome».
- Подтвердите всплывающее окно, нажав кнопку «Добавить расширение». Вы увидите сообщение об успехе, и веб-сайт разработчика откроется в новом окне, которое вы можете просто закрыть.
- Теперь откройте веб-страницу, на которой вы хотите найти шрифт. Щелкните значок головоломки рядом с адресной строкой браузера и выберите расширение «Какой шрифт — найти шрифт».
- Наведите указатель мыши на текстовые элементы на странице, чтобы получить название семейства шрифтов. Вы можете щелкнуть по тексту, чтобы открыть всплывающее окно, показывающее семейство шрифтов, стиль, высоту строки, размер и сведения о цвете.
- Можно получить сведения о шрифте нескольких элементов на странице. Вы можете навести указатель мыши или щелкнуть на различные элементы на странице, чтобы получить сведения о шрифте.
- Наконец, нажмите всплывающее окно «Выйти из шрифта», чтобы закрыть расширение и начать просмотр страницы в обычном режиме.
Заключительные слова
Веб-сайт может импортировать шрифты с использованием внутренних или внешних таблиц стилей. По сути, вы можете анализировать свойства CSS в таблицах стилей, чтобы получить полную информацию о шрифте. Вы можете использовать один из вышеперечисленных методов, чтобы легко узнать, какой шрифт использует веб-сайт.
Бывало ли у вас, что посещая какой-нибудь ресурс в Интернете, вам понравился используемый шрифт? Но как определить название шрифта на сайте? Есть несколько способов.
Используем расширение для браузера
Для каждого браузера есть множество расширений для определения шрифтов на странице сайта, вот самые популярные из них:
Fonts Ninja
WhatFont
Смотрим в коде страницы
Этот способ менее надежен, но позволяет быстро узнать название шрифта без установке расширений, может быть полезен если вам не хочется устанавливать расширение из-за одного раза.
Нажмите правой кнопкой мыши на текст с понравившимся шрифтом. И выберите пункт “Исследовать” в Firefox или “Посмотреть код” в Chrome.
Перед вам откроется окно для разработчиков. В правой части экрана найдите пункт начинающийся с “font-family”, после него будет отображаться название шрифта.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you’re looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering “Apple SD Gothic Neo Regular” nicely highlights just the “웃”:
Hovering “System Fonts” gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its “All Fonts on Page” section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools’ “Elements”, go to its “Computed” tab, and scroll all the way down to the section called “Rendered Fonts”. Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows “Network resource” (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you’re looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a “Fonts” tab, but its output is quite limited. For “Identity” it often shows secondary information such as “TN web use only” (where Firefox shows that as a comment, like in “Interstate Condensed, TN web use only”). Or shows nothing at all. But, finally, it’s a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for “웃” Firefox’s “Apple SD Gothic Neo” is converted into “AppleMyungjo” on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don’t include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you’re not interested in. Then, when selecting the surrounding element again, you’ll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the “웃” character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer “Apple SD Gothic Neo” and “.Apple SD Gothic NeoI” (which are OpenType PostScript) but older versions of Firefox used “AppleGothic Regular” instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase “i” in “NeoI” which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I’ve not investigated what that entails.
