Before iOS7, font used in native and UIWebView matched, now UIWebView view version is distorted

Question

I load my own fonts in a native app that uses many UIWebViews. The UIWebViews need to match the look of the rest of the app, and did for iOS 5 & 6. I don't have enough reputation points to post these three images:

1) A UIWebView heading in iOS 6 (good, matches native look)

2) The same UIWebView heading in iOS 7 (bad, doesn't match native look)

3) How the fonts are included in the plist

The styles for the UIWebView pull the font like this:

@font-face {
    font-family: "BG";
    font-weight: bold;
    src: local("BrandonGrotesque-Bold");
}
@font-face {
    font-family: "BG";
    src: local("BrandonGrotesque-Regular");
}
@font-face {
    font-family: "BG";
    font-style: italic;
    src: local("BrandonGrotesque-RegularItalic");
}
h1 {
    font-weight:bold;
    font-family:BG;
    font-size: 3em;
}

I haven't been able to find evidence of a deliberate change in the @font-face implementation in any docs or SO answers addressing the changes in iOS 7 so I'm hoping I'm missing something about a dependency.

Thanks in advance for your insights.

Answer 1

The @font-face rule set uses some declarations in combination like a multiple-field primary key. Others declarations, namely "src" (are there others?), are the value.

In my case, iOS 6 used declarations like "font-weight" only as keys. In iOS 7 the addition of a font-weight declaration to a @font-face rule set will, like iOS 6, distinguish it from another block with the same font-family value for the purpose of referencing the font value of the src declaration, but, unlike iOS 6, also apply the transformation. Herald the puffy!

I fixed my problem by adjusting my styles to the below, but I probably should have also declared a unique font-family for the italic font-face since there will probably be an iOS 8.

@font-face {
   font-family: "BG-bold";
   src: local("BrandonGrotesque-Bold");
}
@font-face {
   font-family: "BG";
   src: local("BrandonGrotesque-Regular");
}
@font-face {
   font-family: "BG";
   font-style: italic;
   src: local("BrandonGrotesque-RegularItalic");
}
h1 {
   font-family:BG-bold;
   font-size: 3em;
}