How To Look Up Fonts on Websites on Desktop and iOS

When I looked at the first draft of the design for our new Ultimate Guides and Ebooks section, the first thing I wondered was “what’s that header font?”. It’s sleek and modern, yet has a newspaper-esque serif feel to it (spoiler: it was Raleway).

Now, I could have asked the designer what font it was but that wouldn’t have played well with my overbearing ego. So instead I used an extension that looks it up for you. An extension that allows you to avoid human contact? I can tell you’re intrigued already.

You can do this from desktop browsers like Chrome, Safari, Firefox, and now from your iPhone or iPad running iOS 8 as well. How? Read on to find out.

Finding Fonts on Desktop

WhatFont is an extension for Chrome and Safari that scans the page’s source code and tells you the font in question. And most of the time, it gets it right. If you’re a Firefox user, check out Font Finder.

This is how the app works: you download the extension, give it permissions, activate it, and let it sit in the extensions bar.

Now, when you’re browsing a page and come across a font you want to know the name of, click on the WhatFont button.

Now, just hover the mouse pointer over the text and the extension will instantly tell you want the font is. Click on it and the bubble will expand with a preview of the font, font family, size, and even the line height.

WhatFont for Safari on iOS 8

Believe it or not… iOS 8 brought support for extensions. Action extensions are supported by browsers like Safari. What this means is iOS, a closed system, has access to a library of extensions, albeit a small one, before Android does. That, I was not expecting. Anyway, here we are. If you know of a way to do this on Android as well, please let us know in the comments.

On iOS, download the WhatFont app. In itself it won’t do anything. You’ll just see a guide on how to enable the extension. So go to Safari, tap the Share button and in the bottom row, slide all the way to the right and click More. From here enable WhatFont.

Now, in Safari, open the page in question, tap on the screen and drag it over the text with the font you want to identify.

Click the Share button, choose WhatFont, and a screen with details about the font will show up. Here you’ll see the font family, the type of font, and even the font size.

What’s Your Favorite Font?

I type in Menlo Regular but prefer to read in Avenir Next or just plain old Helvetica. I’m also a fan of fonts used in Instapaper like Tisa, Georgia, and Lyon. What about you? What’s your favorite font? Let us know in the comments below.