Custom fonts are blank and appear on loading - css

Question

Our custom fonts are loaded but until they are loaded no text is displayed. This also happens with fonts loaded from Google Fonts.
Any idea why this is happening and how to use a fallback?
The following CSS is served:
#font-face {
font-family: 'ProximaNova';
src: url( '/media/fonts/proximanova-bold-webfont.eot');
src: url('/media/fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-bold-webfont.woff') format('woff'),
url('/media/fonts/proximanova-bold-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-bold-webfont.svg#wf') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/media/fonts/proximanova-regular-webfont.eot');
src: url('/media/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-regular-webfont.woff') format('woff'),
url('/media/fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-regular-webfont.svg#wf') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/media/fonts/proximanova-extrabold-webfont.eot');
src: url('/media/fonts/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-extrabold-webfont.woff') format('woff'),
url('/media/fonts/proximanova-extrabold-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-extrabold-webfont.svg#wf') format('svg');
font-weight: 800;
font-style: normal;
}
body, h1, h2, h3, button, input {
font-family: 'ProximaNova', tahoma, sans-serif;
}
While experimenting, we tried loading the custom fonts with JS after the page loaded - with the same effect. Is it a problem with the font file or is it related to Chrome's implementation of custom fonts?

Answer 1

This is most likely expected behavior at the moment. (See Chris Coyier's short explanation.)
Some browsers detect whether text should be displayed using a custom font, and they wait for that font to be loaded before displaying the text. This gives you a flash of invisible content (also known as FOIC). It avoids the layout shifting that can occur when text is displayed in one font and then updated to another (sometimes known as a flash of unstyled content, or FOUC). It looks like Chrome prefers the first method at the moment.
The Filament Group has published an article with workaround for this default behavior. I'm not sure how much their JS solution differs from what you tried. They're doing essentially the same thing—asynchronously loading the custom font declarations—but they also load the font directly in their async CSS file as a data URI. That may be what makes the difference.