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


Tags: css,font-face,google-chrome-devtools

Problem :

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.



Solution :

(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.


    CSS Howto..

    How do you centre two icons (images) side by side in footer?

    how to change css content attribute of a list item

    Why does overflow hidden affect height and how can I fix it in this example?

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How to use CSS spinner in Angular2 while loading asynchronous list?

    How to simplify my CSS stylesheet?

    How to show only the top portion of an image with CSS?

    How to apply same event to multiple buttons?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    Show Div When Click Link Button

    How can I anticipate which type of CSS selector will work?

    How to compare two css files and copy just the differences?

    How to make

    How to enable Stylus url() rewrites

    How do I programmatically change the CSS link for HTML files in C#?

    how do I customize header color in jquery mobile?

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to auto resize the parent node according to its children

    How to set css attribute for pseudo element in Dart

    How can I animate this?

    How to create centered image slideshow behind website content

    how to change a css of an input if the value of it is not empty in angularJS

    How do I change tab size in Vim?

    How to change MenuItem focus/hover color

    How to set CSS for disabled checkboxes?

    CSS How to put an image between buttons?

    How to remove a class as each image is loaded

    Modal box doesn't show completely

    How to background css with php variable

    How to style five rows with alternating fixed/variable width?