Select the text element
Use Chrome DevTools to inspect the element containing the text you want to identify. Google’s DevTools article places the rendered-typeface summary under Computed Styles. Keep the selected element precise: a paragraph, label and heading can legitimately use different families on one page.
Compare requested and rendered families
A CSS stack can name several alternatives. Google explains that DevTools reports the typeface used by Chrome’s text-rendering layer, helping distinguish an intended web font from a fallback. Record both the requested family list and the rendered result when diagnosing a mismatch.
Account for mixed text
Inspect the actual words and characters that prompted the question. Google describes the reporting as applicable to local fonts, web fonts and Unicode glyphs. A page-wide impression is less specific than an observation of the relevant text element.
Use the result as identification evidence
Keep the element, family and style in your design notes. Identifying a font is separate from obtaining permission or an appropriate resource for your own project. If the lettering is artwork inside a picture instead of live page text, use the image identification guide for a different kind of evidence.
Your questions, answered.
Is the first family in CSS always the one displayed?
No. Google explains that the browser can fall through the font stack when the requested family is unavailable.
Does recognizing the family give me a font license?
No. Identification and permission to use a font are separate decisions; consult the official supplier.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.