0

this is a small issue that I don't know how to exactly ask, but basically what's happening is I uploaded a custom opentype font, but loading it on the site will leave an empty gap for a couple seconds before loading the actual text. I've seen a couple sites that attacked these issues by loading a local font before changing into the custom font, but I lost track of these (rare-ish) sites to find out how they do it.

How would I fix this issue? Will I have to use some form of javascript to accomplish this task?

Thanks in advance! All answers appreciated!

0

2 Answers 2

1

it`s good question :)

Read this http://paulirish.com/2009/fighting-the-font-face-fout/

And add into or file-script (if you addded @font-face in your css...):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //load fonts
    (function(){
      // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
      var d = document, e = d.documentElement, s = d.createElement('style');
      if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
        s.textContent = 'body{visibility:hidden}';
        var r = document.getElementsByTagName('script')[0];
        r.parentNode.insertBefore(s, r);
        function f(){ s.parentNode && s.parentNode.removeChild(s); }
        addEventListener('load',f,false);
        setTimeout(f,3000); 
      }
    })();

});
</script>
1
  • Thanks a lot for this answer, @Jane ! However is there a way to replace the text with a local font rather than hiding the page/text before loading the font? Jul 18, 2012 at 8:54
0

i prevent fout creating a css file only for the font-face rules and use the link tag in the header of the page just before linking my master css file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.