Geek Answers Handbook

How to load external fonts using javascript before preparing a page

I use typekit on my website to download fonts, and typekit gives me 2 links.

<script src="https://use.typekit.net/xxxx.js"></script> <script>try { Typekit.load({ async: false }); } catch (e) { }</script>

I put these links in the main tag, but when I enter my website, fonts load after the content. I wonder how it can load until the page is ready or before the content is loaded.

PS: I tried async: true and false .. Both of them gave the same result.

+6
source share
2 answers

One thing you can use is Font Evens to hide content while downloading fonts. https://helpx.adobe.com/typekit/using/font-events.html

0
source

You can try window.onpaint if just putting font links on <head> doesn't work.

 <head> <script src="https://use.typekit.net/xxxx.js"></script> </head>

Then;

 <script type="text/javascript"> function preloadFunc() { try { Typekit.load({ async: false }); } catch (e) { } } window.onpaint = preloadFunc(); </script>
0
source

More articles:


All Articles