Fonts are by far one of my favorite parts of design.
I will not disclose the amount of fonts I have on my hard drive, it would embarrass everyone involved ;)
One of the best ways to discover fonts you love (and maybe use on your blog) is through the blogs you read. You’ve no doubt happened upon a really cool font somewhere and wondered, “What font are they using?”
Most of the time, it’s pretty easy to figure out. Read on to learn how to become your own font detective.
The 2 Types of Fonts
First thing to know, there are 2 types of fonts you’re likely to see, fonts in images and web fonts.
A font in an image is pretty straight forward. It’s when someone creates an image using a program like Photoshop or Picmonkey and uses a font as part of the project. The font becomes an element of the image that is them uploaded to a blog. This type of image would be things like headers and logos as well as pictures that appear in the body of a post.
A web font is used mainly for text and headings on a blog or website. They also appear in sidebar headings (although sometimes these are images) and other places on websites. This type of font is updated and editable by the user of the blog. The font that is displayed is controlled by rules created in the blog’s theme files, specifically the stylesheet of a WordPress theme.
How do you tell the difference between a web font and an image of a font?
Telling the difference is pretty easy. Simply try to highlight the font you’d like to know the name of (like you were going to copy it) and see what happens.
If you can highlight the font like this, it’s a web font:
If you try and highlight a font but it highlights like this, as a block (see the purple arrow), it’s an image:
When you right click on an image, you also have the ability to “Save As” while this option is not available for web fonts.
What Font is it?
If you’re working with an image of a font, you can save the image and then upload it to What the Font! to discover the name.
Now this service is a best guess and although it may not be able to figure out the exact name of the font in question, it will often give you suggestions that are pretty close. Depending on your desired us of the font, those suggestions are often good enough. If you’re looking for an exact match and What the Font doesn’t do it for you, then you can always email the blog owner.
With a web font, it’s easy to figure out a 100% match. In this example, I’ll be using Chrome as my browser but this can be done with other browsers as well.
Chrome comes with something called Developer Tools. I know, it sounds scary but nothing can break here, you’re just digging under the hood of a blog.
Simply highlight a section of text that you’d like to know more about and then right click on it. Once you right click in Chrome, you’ll see an option to “Inspect Element.” Click on that to continue.
In a separate window, a whole bunch of code is going to pop up but all you need to look at is on the right hand side, that’s the stylesheet rules I mentioned earlier:
You’ll want to look for “font-family” to discover the name of the font. The first font in the list is the one you want, the ones after that are browser fall backs in case a certain browser (like Internet Explorer) doesn’t support the first font listed.
(You’ll also see color codes, #3E3E3E and #CF435E, this trick also works if you see a color you like on a blog! You can inspect the element to find hex color values.)
That’s all there is to it, easy huh? Try this trick on your own site and see what fonts your blog is using!
P.S. Today is lesson #1 in the free, Build Your Remarkable Blog training being offered as part of the Blog School launch. The free training is only available until August 12! Sign up here.