If you’re design savvy (or even just design curious), you might have seen a nice font being used on a website, but not known it’s name.

Good news.

With DevTools, it’s a three second job to find out.

(As usual, these instructions assume that you’re using Google’s Chrome browser).

Here’s how to identify that font with DevTools…

Challenge: find out (exactly) what font this text that you’re reading right now is written in!

Just in case you got stuck, here’s a quick runthrough of how the sequence above should look:

Easy once you know how, right?

Now for the (optional) CSS lesson

Remember the list of fonts you were just looking at?

font-family: 'Comic Sans MS', 'Chalkboard', 'Marker Felt', sans-serif

What this does is give your browser a list of fonts to use.

If Comic Sans MS is available, your computer will use it. (It’s quite likely, as Comic Sans is a font that comes with both Windows and OS X).

If not, the next font in the list is used instead, eg Chalkboard. And if not, the font after that will be used instead, eg Marker Felt.

What if you don’t have any of these fallback fonts?

Well, then your computer will use the default ‘sans-serif’ font for your system. Which means Arial a PC, or Helvetica on a Mac.

(Remember that all kinds of devices can browse the web, so someone could be using a games console, an ebook reader, or even their fridge to view your website. Don’t ask why though…)

So… this is why we kept scrolling to the ‘Rendered fonts’ info… to be sure what’s happening on your particular setup.

Bonus challenge: can you change the font size of this headline?

One of my favourite things about DevTools is that it lets you play about with the design of a website.

Here’s how to change the size of any HTML text:


Here’s how that looks:

Posted to DevTools for Designers in 2016.

Join 2,474 readers receiving my thoughts on life, design and making stuff happen each Sunday