Delay div visibility until font has finished loading

Question

How can I determine if a font has finished loading?

I can use the ideas from this question to delay displaying the div in question, but how can i know when the font is available?

I wish to delay displaying a div until the font used has finished loading.

The current effect is that the words display in font A, then abruptly change into font B.

jsFiddle demo (of the undesirable effect)

possible duplicate of [How to know if a font (@font-face) has already been loaded?](http://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded) — James Wilkins, Apr 30 '15 at 18:00

score 0 · Answer 1 · answered Apr 30 '15 at 17:41

You could just wait for the whole page to load:

$(window).bind("load", function() {
       $('.container').show();
});

@import url(http://fonts.googleapis.com/css?family=Orbitron:700);
@import url(http://fonts.googleapis.com/css?family=Lobster:400);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower:400);
@import url(http://fonts.googleapis.com/css?family=Oswald:400);
div{font-family:'Segoe UI Light';font-size:3em;}

.container { /*container is hidden by default*/
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <!--Wrap  everything in a container-->
  <div id="a1">This Is Line One</div>
  <div id="a2">this is line two</div>
  <div id="a3">THIS IS LINE THREE</div>
  <div id="a4">this is line four</div>
</div>

Delay div visibility until font has finished loading

1 Answers1