How to use @font-face on a Chrome Extension in a Content Script

Just use a relative URL. It's simpler, cleaner, and is The Right Thing To Do™:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
}

I know this question is old but it's a top result on Google and the accepted answer is inefficient.

EDIT: It seems that others are getting mixed results for this. I should mention that it probably doesn't work when used in Content Scripts. I've tested this in Popup Scripts and it works fine.