1

I'm running into a somewhat unordinary issue. It seems impossible to load an external font synchronously

I tried the @import inside css and a simple header link tag, both of them are loading the font asynchronously.

I don't know if this is the new standard or so on nowadays browsers?

How can I make the document hang/wait/loop until some font (google font) is loaded and ready to use?

What's the purpose?

On most websites, we don't care to show content on some standard sans serif font, then have it replaces with custom fonts once it arrives. but not in this case. I'm runnin a webgl canvas that prints some text with this font. When I use some 2000ms setTimeout on rendering this canvas, it works, but this is obviously not a solution.

Any clue on how to wait for a font to be ready?

Community
  • 1
  • 1
Vincent Duprez
  • 3,772
  • 8
  • 36
  • 76
  • You should probably use a webworker to cache the font so that it isn't being loaded from source every time – Derek Pollard Nov 06 '18 at 18:50
  • What you need is a font preloader. I found [this answer here](https://stackoverflow.com/a/19922662/881032) that might lead you to the right direction and [another tutorial on tutsplus](https://webdesign.tutsplus.com/articles/quick-tip-avoid-fout-by-adding-a-web-font-preloader--webdesign-8287). Hope that helps :) – lumio Nov 06 '18 at 18:54
  • You could wait for the font to be loaded and then show your content: [see here](https://stackoverflow.com/a/32292880/3233827) – ssc-hrep3 Nov 06 '18 at 18:54
  • This may not be the answer you are expecting for. In this situation I would use local fonts to be able to use [font-display:swap](https://css-tricks.com/font-display-masses/#article-header-id-1) When you are using `font-display:swap` "fallback text is immediately rendered in the next available system typeface in the font stack until the custom font loads" – enxaneta Nov 06 '18 at 19:06
  • @enxaneta Webgl doesn't care about this css, once it rendered it won't change – Vincent Duprez Nov 06 '18 at 19:30
  • @DerekPollard It's only loaded once.. – Vincent Duprez Nov 06 '18 at 19:31
  • @ lumio and @ssc-hrep3 Thanks, I'll have a look and let you know – Vincent Duprez Nov 06 '18 at 19:31
  • @VincentDuprez if it was only loaded once, you wouldn't have the issue at hand. If it loads every time you load the page, that is what I'm talking about. – Derek Pollard Nov 06 '18 at 19:31
  • @DerekPollard Ok, see what you mean, its loaded once on every device, its a game inside a canvas... the game starts rendering texts before the font is loaded.. – Vincent Duprez Nov 06 '18 at 20:13
  • You may want to use font-face observer. This allows you to observe for when font is loaded. You can then change visibility of your text at that event. Have a look here : https://github.com/bramstein/fontfaceobserver – Punit S Nov 29 '18 at 12:22

0 Answers0