How do I interact with @font-face definitions using the Chrome debugger?

Question

When working with CSS I really like being able to use the web inspector to add new rules and to interactively edit existing rules. However, I can't find out how to work with @font-face rules

1. Where can I see if a @font-face rule from my stylesheet was recognized and is taking effect?

   For example, if I have a rule with a "div.foo" selector then all I have to do is inspect any div on the page that has the class foo in order to see the rule taking effect and to live-edit its values.

2. How can I add a new @font-face rule interactively?

   Whenever I try to add one via the "New Style Rule" button (the one with a + symbol), Chrome crashes. Is it to do with the weird "@" on the selector? What is the "@" about anyway?

I am using Chrome 19 since I like its debugger the best but I wouldn't mind using another browser if that were the only possibility here.

Answer 1

(1) I don't think you can. @font-face merely adds a new font to the set of available fonts. Given an element that has a font-family: Foo, the dev tools don't seem to provide any information about the origin of the font (whether it's available locally or downloaded via a @font-face rule). You would have to manually search for @font-face rules in the style sheets of the page and write down which font names are "external". (You can do that by going to the "Resources" tab of the dev tools, and typing "@font-face" into the search box.)

Btw, you can view which external font-files are available to the web-page, by going to the "Resources" tab in the dev tools, and expanding the Fonts directory. Each file in this directory represents one @font-face rule.

(2) You can't use the "New Style Rule" method because @font-face is not a style rule, but an at-rule. In order to add a @font-face rule to the web-page, go to the "Resources" tab in the dev tools, select a style sheet (.css file) in the Stylesheets directory, and copy-paste the @font-face rule into that style sheet. Now, you can start using the newly added font name immediately in your font-family properties.