How can I determine which font file is being used, not just the font family?

user_135318 0
Viewed 3646

Let's say I have the following font face definitions:

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans.regular.woff") format("woff");
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans.light.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans.semibold.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans.bold.woff') format('woff');
}

In Chrome's dev tools, I can tell which font family is being used:

enter image description here

But is there a way to tell which specific font file is being used? I'm trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own 'fake' bolding on the regular version of the font.

google-chrome-devtools font-face css
4 Answers

To answer my own question, Nikul Khatik gave the correct answer. Chrome dev tools doesn't support this feature, but Firefox's does:

enter image description here So use Firefox to get the actual font face that's used for an element.

user_1353180

In Chrome there is no way to know which font file is loaded but you can get good hints by check out the "Rendered Fonts" in "Computed" tab and then check font files name in "Application" tab

check Rendered Fonts:

check Rendered Fonts

check font files name: check font files name

user_121296020
  • Open Chrome DevTools (Right click > Inspect)
  • Go to Sources tab
  • Look for the font folder (if you're using Google Font, go to ☁fonts.gstatic.com)
  • Open subdirectories if any, you'll get the actual font file being used

Chrome DevTools

user_16627740

In Safari, in Resources it will tell. you the specific font files that are loaded. 

Fonts
    fontfileBold.ttf
user_44887700
Related