Login/Register
How to load external fonts via javascript before page ready
Asked Answered
javascriptfontswebfontstypekit
R

2

6

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.

Raffish answered 11/7, 2016 at 11:9 Comment(4)
Are there any other lines between font links and <head>? This may cause the problem. – Zingaro
No.. I tried as you said below – Atp
Could you please provide all the code inside your <head> element? A live example would facilitate helping you, too. – Bravery
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> – Atp
I
0

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

Infrared answered 11/7, 2016 at 11:28 Comment(3)
I guess this is only way but I didn't like it but I think I am going to use css like that. .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading p, .wf-loading span, .wf-loading a, .wf-loading button, .wf-loading input[type=submit]{ visibibility:hidden; } – Atp
You could also implement a loading screen. From UX standpoint it's a bit more annoying but looks better. – Infrared
Yes you are right but I wish it was a solution that fonts are downloaded via js before content load. Thank you so much to everyone for help – Atp
Z
0

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>
Zingaro answered 11/7, 2016 at 11:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.