How to load external fonts via javascript before page ready

6
votes

I'm using typekit on my website to load 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 head tag but when I enter my website fonts are loaded after content. I wonder how can it load before page ready or before content load.

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

2
javascriptfontswebfontstypekit
Are there any other lines between font links and <head>? This may cause the problem. - Emre Bolat
No.. I tried as you said below - Tolga Kısaoğulları
Could you please provide all the code inside your <head> element? A live example would facilitate helping you, too. - Mark Langer
I'm using like this: <head> <script src="use.typekit.net/xxxxx.js"></script> @*<script>try { Typekit.load({ async: false }); } catch (e) { } </script>*@ <script type="text/javascript"> function preloadFunc() { try { Typekit.load({ async: false }); } catch (e) { } } window.onpaint = preloadFunc(); </script> <meta>..... <title>.... </head> - Tolga Kısaoğulları

2 Answers

0
votes

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

0
votes

You can try window.onpaint if simply putting font links to <head> is not working.

<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>