The process of identifying a font using the Inspect Element tool is quite simple, and you won't need any coding skills. It's a great way to gain inspiration when designing your own site. You can understand the design elements of a site by looking at its CSS, HTML, and other information. In case you didn't know, your browser's built-in Inspect Element tool allows you to examine a website's source code.
How to Find Fonts Using the Inspect Element Tool With online extensions and your browser's built-in Inspect Element tool, identifying a font is quick and easy. Perhaps you come across an appealing site while browsing the web, and you want to know what fonts it's using. In addition to your site's color palette and structure, the font you choose also plays an essential role in keeping your audience engaged. It’ll tell you everything you need to know.The success of your website greatly depends on its appearance. Having the right color combination and theme will keep your visitors on your site for a little longer. If even that font is not available, it’ll use whatever default sans-serif font the browser likes, but at least it’ll be the correct type of font!įor more information about coding fallbacks, alternative methods to using non-web-safe fonts, and everything typography related, you can pick up a copy of our Web Typography Handbook. The browser will first try to use Helvetica, and if it’s not installed, it’ll attempt to use Arial. Since both of these fonts are considered to be sans-serif fonts, you can write a CSS declaration like this: Let’s say that you want to use Helvetica, but you’ll settle for Arial. Therefore, you should always specify fallback fonts and a category that the font falls into. This is good because your content still goes through, but your design might be compromised.
This means that you may have intended to use a cute, scripty font, but what you get is Your text will still be visible, but the browser will use whatever default font it supplies for situations like this.
Those Android users will just have to fight for themselves. So to be clear, there are only five fonts that are considered universal:įeel free to use these fonts all you want! Even if you dug up that old Packard Bell you had back in 1997 and it didn’t explode when connected to the modern web, you’d be able to see these fonts rendered as intended. Even worse, users of Android mobile phones don’t have any of these fonts.
For example, Windows XP users don’t have Palatino or Trebuchet MS. Users of older operating systems don’t have some of these fonts we’ve declared web-safe. If you use Calibri on your webpage, Mac users won’t see it if you use Andale, Windows users won’t see it but if you use Georgia, you can rest assured that users of both systems will see the it. Those fonts that fall into that middle area, covered by both operating systems, are what we call web-safe fonts. In fact, between these two systems, there are only ten fonts that overlap: None of the Calibri or Cambria fonts are available on the Mac, and the Mac has at least a dozen just on this page that aren’t available in Windows! Right away, we can see that only one of the displayed fonts overlaps: Arial.
To illustrate this point, here’s where the fonts are stored in Windows 7:Īnd here’s where they’re stored on Mac OS 10.6:
Well, here’s the problem: the two most widely-used operating systems-Windows and Mac OS X-each come installed with a different set of fonts. Now you might be wondering why this will happen so often if there are so many fonts installed on your computer.
Therefore, if the web page’s code is calling for a font that a user does not have installed on their computer, it won’t show up! What that person will instead see is a default font, which might look a little ugly. When a web page loads, the browser is told to write text onto the screen using a specified font-one that is stored on the computer that the browser is running on. But have you ever noticed how few of them are used on the web? There are an awful lot of fonts in the world! For years, no doubt, you’ve been using a ton of them in word processing documents, party invitations, banners, etc.