Custom font and elements with 'width: auto'

I am using the well known 'Open Sans' font family in my current project, and I'm facing the following problem.

I have buttons and other elements with width: auto, so when loading the page these elements will have a width calculated by the browser until the 'Open Sans' font is actually loaded from Google Fonts, then their size is recalculated, creating an annoying effect.

Here is a demo: http://jsbin.com/IkifUhUL/1 (refresh the page multiple times to see it in action).

Is there a workaround for this problem without specifying a width for these elements?

Any tips appreciated!

Solution

You could use the Google Web Font loader API for this. https://github.com/typekit/webfontloader

Basically this would allow you to hide the text until the font has been loaded and then you can show your text on load.

Something along the lines of

WebFontConfig = {
   loading: function() { // While waiting to load code here },
   fontactive: function(familyname, fvd) { // Once loaded code here }
}