How-to · 6 min read
How to find the fonts and colors any website uses
Ever landed on a site with gorgeous typography or a colour palette you loved, and wished you knew exactly what it used? You can find out — the fonts and colours a website uses are defined in its public styles, so they're readable if you know where to look. Here's how, the fast way and the manual way.
The fastest way: scan it
Paste a URL into our tool and run the fonts & colours scan. It reads the site's stylesheets and returns the fonts in use plus the main brand colours as swatches with hex codes you can copy. It works on any site, not just Shopify — handy for design research anywhere.
Scan a site's design
Get the fonts and colour palette from any website.
Finding fonts by hand
If you'd rather look yourself, right-click the text you like and choose Inspect. In the styles panel, find the font-family property — the first name listed is the font in use. You can also check the page source for a fonts.googleapis.com link, which names any Google Fonts the site loads.
One thing to know: sites list a fallback stack like "Poppins", Arial, sans-serif. The first name (Poppins) is the real choice; the rest are backups. And watch out for icon fonts (like Material Symbols or Font Awesome) — those aren't design typefaces, so a good detector filters them out.
Finding colours by hand
Use the same Inspect panel: click an element and look at its color or background value, usually a hex code like #4f46e5. Browser dev tools also include a colour picker that lets you sample any colour on the page and copy its hex. To find the brand palette rather than one element, look at the most-used colours across buttons, links, and headings.
Using what you find (the right way)
Identifying fonts and colours is great for inspiration and for keeping your own design consistent. A couple of honest notes:
- Fonts may need a licence. Google Fonts are free, but some premium fonts require buying a licence to use on your own site. Don't assume free.
- Take inspiration, not identity. Borrowing a colour you like is fine; copying a brand's whole look is not. Build your own identity on top of the ideas you gather.
Design research pairs naturally with the rest of a store audit. If you're researching Shopify stores specifically, combine this with a competitor theme audit to see the full picture of how a store is built.