Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I tell which font Chrome is using? [duplicate]

Imagine I have the following CSS

font-family: 'Non-existant Sans', Arial, sans-serif; 

Assuming 'Non-existant Sans' is not installed on the system, Arial will be used by the browser. Using Chrome, is there any way of finding out which font is being rendered?

Edit: Dave (in the comments to the question) has pointed out a similar question. I'm specifically asking about Chrome here. Many of the answers in the other question suggest extensions which are okay, however; is there a native way of determining this information using the Dev Tools alone?

Edit Sept 2013: The Chrome team have just announced that font-family inspection is now available in the latest builds of Chrome Canary (Twitter link contains an image with more info). This should trickle down through dev > beta > stable over the next few weeks – great news!

like image 873
Liam Newmarch Avatar asked Feb 03 '12 14:02

Liam Newmarch


People also ask

How can I tell what font Chrome is using?

If you are using Google Chrome, right click on the mystery text, select Inspect. DevTools pops up, make sure you are on the Styles tab and head to the Font-Family attributes to learn more about the fonts. If you are using Firefox, right click the text, select Inspect Element.

How do I find out what font is used on a source?

You can usually view the source code by right-clicking, on the web page and selecting the View page source option in the pop-up menu. The source displays the programming code used to build the web page. In this source code, you can find the type of font used for the text on the web page.

Why does my Google Chrome have a weird font?

Enabled ClearType with the default settings. Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.


2 Answers

In Google Chrome devtools in the 'Elements' tab, under 'Computed':

Magic paper roses hello kitty

like image 92
Jürgen Paul Avatar answered Sep 25 '22 12:09

Jürgen Paul


I'm a bit late to the party but I've just discovered a very simple way to debug which font your browser is using.

In the Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font (I add random letters) while keeping an eye on the text in question. When you change the one in use you will see the text change font as it falls back to the next one in the stack.

I assume something similar is possible in most dev tools

Voilá

like image 44
Iolo Avatar answered Sep 22 '22 12:09

Iolo