How to Find Out What Font a Website UsesNov 15, 2020
As you all know, I recently made a video on how to find out what platform a website uses and it seems like you guys really liked it! So today I'm sharing yet another cool trick I've got up my sleeve.
It's common to find yourself on a website that has the BEST font and be confused as to how to find it or where the heck it came from. Today I'm solving your problem in the easiest way, similarly to finding out what platform a website is using. All of these tips and tricks are so nice because sometimes you just need work to be easy, and I know we all feel that way sometimes (ahem.. all the time)! Oh, AND we're doing this step-by-step on both Google Chrome and Safari! Yay for options. Sorry, Firefox users 😬.
Let's learn how to find out what fonts are being used on a website in only a few clicks. For those of us who are much more visual, scroll to the bottom to watch the video version of this tutorial!
Step 1: Right Click and Select "Inspect"
I'm going to show you three different websites in each step that all use a different website platform to show you how to identify each one.
Go to a website that makes you green with envy when it comes to their fonts. For me, it's definitely some of my friends' websites! Right-click a blank area of the page and select "Inspect" and get ready for your inspection. The first example I'm showing you is my photographer friend Casi Yost's website.
This is my photographer friend Casi Yost's website, which is just stunning!
Step 2: Under "Sources" Select Category for Fonts
Under the "Sources" tab on the top right of the page, find the category that shows anything having to do with fonts. When you select the drop-down menu, a bunch of coding will pop up. From there, you should be able to see a few areas that state "font-family." This is where the type of font should follow shortly after.
For example, "font-family: Nunito Sans" - Nunito Sans being the font!
Next, my illustrator friend Brooke Glaser:
This is my illustrator friend Brooke Glaser's website, which is so bright and playful!
Another example on a different website, select "Sources" then under the "fonts.googleapis.com" drop-down menu, you'll see that on the right side of the screen it shows "font-family: Grand Hotel".
Anddd my bright-ass site:
On my own website, going through the same steps we see "font-family: Libre Franklin". This actually made me laugh because, for some reason, I thought I had several different fonts on my website, but to my surprise, I only use a couple and the rest are graphics full of chaos. Yay for conservation?!
Let's do the same inspections from Safari, it'll be like, the same but different!
Step 1: Right Click and Select "Inspect Element"
For Safari users, start by right-clicking anywhere on the page and select "Inspect Element." If you're feeling like deja vu, it's because this is almost the same on both browsers. I do feel it's important to share this tutorial using both though because of inclusivity.
Step 2: Under "Sources" Tab, Select Folder Associated with Fonts
The menu is going to pop up on the bottom of the page on Safari, don't be alarmed! Select the "Sources" tab and you'll see a cute little folder called "fonts". I mean, can they be any more clear?! This seems like it would be super easy BUT the folder gives you the names of fonts without providing what they look like! Bummer, but you do have options.
Option 1: Google the font name and see if it matches which font you were getting googly eyes for. Stay tuned for the second option in the next step!
Step 2b: Search for "font" or "font-family" in the Search Bar on the Right and Find Font
Here's where option two comes into play! Search "font" or "font-family" in the search bar on the right side of the pop-up menu. This will bring up everything within those boundaries and will give you the exact font name you want!
From Brooke's site:
On this website, the platform being used is Squarespace so it's going to look a little different than the previous. There's no "font" folder that pops up, SO, we have to use our nifty search bar to search either "font" or "font-family". This will list out all the fonts being used on the website! It just takes a little extra searching. Good thing we got all the time in the world!
From my site:
I use Kajabi for my website platform, which didn't include the "font" folder, so we have to search again! This is good to remember when you have to problem-solve, if the "font" folder doesn't pop up immediately, you should try using the search bar.
I hope this video helps you find some fonts you've been loving on other websites! I know I found myself in this dilemma many, many times. Because of that, this trick has been SO helpful to me, and now hopefully I was able to pass on this wisdom to you!