I hope you found this tutorial useful, and special thanks to Paul Irish for revealing the feature. This tool also works well with some webfont services like Typekit and Google Web Font. We can now easily see which font is being used as well as the sum of glyphs that are displayed. This new tool in Chrome is definitely handy for web developers. Hover over More Tools on the drop-down menu. This button is located next to the address bar in the upper-right corner of your. Scroll to the bottom and you will find the exact font family as well as the sum of glyphs that are being used for the selected element (see screenshot below).Įven when we only specify the typeface ( serif and sans-serif ) and not the font family, it can still tell us which font is being rendered on the page (see screenshot below).īesides that, we can also see the font family that is specified within the pseudo-element and the font that is served with Here is an example: The Chrome icon looks like a colored ball with a blue dot at the center. Now, in Chrome Canary DevTools, head over to the Computed tab. In the CSS rule, we set some generic font families, like so.įont-family: Verdana, Geneva, sans-serif In this example, we have a fairly standard text block that consists of several paragraphs and headings. Recommended Reading: Detect Browser CSS Support With Rule How-to Now, let’s jump right in and see how it works.
INSPECT ELEMENT CHROME INSTAGRAM INSTALL
Download Chrome Canary here, and install it on your computer. This feature, at the time of this writing, only comes in Chrome Canary, and not available for the regular Chrome yet. But, how do we know exactly which font the browser is actually using? We can install an extension to do the job, but there is a more accurate built-in feature in Google Chrome. This font family acts as a suggestion for the browser to decide on which font to use – if the first choice fails, use the next one, and so forth.
For example, we can write the following: font-family: Times New Roman, Georgia in the CSS rule. It’s a rather common practice to use multiple fonts for a single page on a website.