Question

We’ve just released a new website (http://www.vulytrampolines.com/), and we’re having issues with font-face calls on Mac Safari/Chrome only. It will load as the proper font in the first half second or so (in the navigation at the top), but then when the video loads within the iframe, the font breaks. It goes much lighter/thinner than normal, and we can’t figure out how to fix it.

The issue only appears to occur when a page has an iframe to a youtube/vimeo video. E.G. http://vulytrampolines.com/aboutus. If you watch the orange navigation, you’ll notice the font will have a bit more weight, but will then go lighter once the youtube video loads in. Deleting the video iframe from the DOM or setting it to display none then fixes the problem, BUT making it visible again breaks the font again.

Anyone have any ideas?

webkit-smoothing, font smoothing, rotation, text-shadows haven’t fixed it.

This is our font-face call:

@font-face {
/*    font-family: neuzeitGroteskLight;*/
    font-family: VulyFont-Light;
    src: url(/css/fonts/neuzeitgro-lig-webfont.eot);
    src: url('/css/fonts/neuzeitgro-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-lig-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-lig-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-lig-webfont.svg#NeuzeitGroteskLight) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
/*    font-family: 'neuzeitGroteskRegular';*/
    font-family: VulyFont;
    src: url(/css/fonts/neuzeitgro-reg-webfont.eot);
    src: url('/css/fonts/neuzeitgro-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-reg-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-reg-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-reg-webfont.svg#NeuzeitGroteskRegular) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}

@font-face {
/*    font-family: 'neuzeitGroteskBold';*/
    font-family: VulyFont-Bold;
    src: url(/css/fonts/neuzeitgro-bol-webfont.eot);
    src: url('/css/fonts/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-bol-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-bol-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-bol-webfont.svg#NeuzeitGroteskBold) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}

Answer 1

I spent a few hours investigating today.

Mac and PC render the same font family/weight/style differently for this particular font.

A) Mac and PC firefox have no issues rendering the font.

A) PC Chrome and PC Safari have no issues rendering the font.

B) Mac Chrome, Mac Safari, iPad and iPhone have issues rendering the font, when a video is either loaded or is playing on a page.

Solution:

We have two versions of the font – a light font and a regular font.

For options A) above, we now use VulyFont-Light, as there are no issues with the font becoming lighter.

For option B) above we use VulyFont with -webkit-font-smoothing: antialiased !important; (I’m not 100% if the !important is necessary). The effect of font-smoothing is that it PREVENTS the font-face from re-rendering or getting lighter/breaking when a video is loaded or starts playing. So we have it rendering almost exactly the same cross-browser/platform. The only difference is minor glyph spacings between the two versions of the font.