PickCodeRight-click the text, choose Inspect, open the Computed tab and look at font-family. Scroll to the bottom of Computed to see Rendered Fonts, which names the font file the browser actually used, since the first font in the stack may not have loaded.
Find it in Chrome DevTools
- Right-click the text and choose Inspect.
- In the Computed tab, filter for
fontto seefont-family,font-size,font-weightandline-height. - At the bottom of Computed, Rendered Fonts shows the font that was really drawn and whether it came from the network or your system.
- To find the file, open the Network tab, filter by Font and reload.
Use it on your own site
If the font comes from Google Fonts, you can load it yourself:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<p class="font-[Inter,sans-serif]">Hello</p>If it is a paid font, such as one served from Adobe Fonts or a foundry, the license usually covers only the site that bought it. Do not copy the font file. Buy a license or pick a free font with a similar feel.
The faster way
PickCode's hover card shows the font, size and weight of whatever is under your cursor. When you copy an element, the code includes the font family, and one click copies the Google Fonts link the element needs. Paid fonts still need their own license.
Full walkthrough: Extract design tokens
Questions
Why does DevTools list several fonts?
font-family is a fallback list. The browser uses the first one it can load, which Rendered Fonts confirms.
Can I find a font from an image?
Not with DevTools; text in an image has no font data. Use a font identification service that works from images.
Can I use a font I found on another site?
Only under its license. Google Fonts are free for websites. Commercial fonts need your own license.