webfont google example

does not avoid FOUT

HTML

<div class="wf-active">sample text</div>

<div class="wf-loading">sample text</div>

CSS

@font-face{
    font-family:'Open Sans';
    src: local('Open Sans Semibold'),     local('OpenSans-Semibold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff') format('woff');
    font-style:normal;
    font-weight:normal;
    font-style:bold;
    font-weight:bold;
}

.wf-active { 
    font-family: 'Open Sans', sans-serif;
    font-size:48pt;
    font-weight:100;
}


 .wf-loading { 
     visibility: hidden; 
 }

JavaScript

WebFont.load({
    google: {
      families: ['OpenSansRegular']
    }
  });