Specific Font Somehow Prohibiting Faux-Italics in Webkit Browsers

I am working with the font PT Sans Narrow, which only has regular and bold. Therefore, I need the browser to use faux italics when necessary. However, only non-webkit browsers are doing this. See this image:

enter image description here

However, the issue appears to lie specifically with this font, as other fonts work fine. (See this JSFiddle: http://jsfiddle.net/pEVj7/) The comparison font in this fiddle was generated with identical settings on Font Squirrel.

I need to be able to simply use something such as the following, and have the browser use faux-italics if there is none available.

<i>My custom italic text</i>

P.S. I understand that faux-italics may not look the same or as good, but in this case, they are better than having no access to italics at all. Secondly, Google Webfonts is not an option due to its poor rendering in Chrome.

Solution

The problem seems to be with the SVG format of the font. If you omit it, Chrome will use the WOFF format and apply synthetic italic (faux italic) on it.

I tested this by first downloading PT Sans Narrow from Google, running FontSquirrel generator on it with default settings, and testing with added italic text in the sample HTML file produced by the generator. That worked well. When I re-ran the generator with SVG option selected, the result is the same, and looking at Network pane in Chrome developer tools shows that the WOFF file is used. But when I removed other formats from the CSS file, leaving just a reference to the SVG file, the text appears upright (though developer tools still say it is PT Sans Narrow, in italic).

Checking your jsfiddle, I see that both the SVG file and the WOFF file are loaded, though as delivered text/html, but still interpreted as font files. I don’t know what is going on there. It possibly relates to internals of jsfiddle.