CODEWITHSUNDEEP
jqueryajaxloaddocument-ready
Natalie
Natalie

Reputation: 77

How to load a google font on DOM ready?

I want to load this font <link href="https://fonts.googleapis.com/css?family=KoHo:400" rel="stylesheet"> with Ajax, on DOM ready, is this possible?

Upvotes: 1

Views: 1224

Answers (2)

YourWebDevGuy
YourWebDevGuy

Reputation: 73

Are you wanting to load the font on DOM ready for performance reasons or because you want the font to be prepared prior to rendering?

If you are using jQuery here is a good read on doing something similar from CC-Tricks https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

From what the article says you can set a cookie that lets your script know that the fonts are cached. otherwise you can load with ajax.

From Article:

// Check if a cookie exists suggesting fonts are cached
if (!fonts_are_cached) {
    // Don't slow down rendering
    $(window).load(function() {

        // Load in custom fonts
        $.ajax({
            url: 'https://fonts.googleapis.com/css?family=KoHo:400'
        });

        // Don't actually do anything with them, just request them so they are cached.
        // Set cookie indicating fonts are cached

    });
}

Upvotes: 0

James Grimshaw
James Grimshaw

Reputation: 307

I'm not exactly sure what you are trying to achieve here. If it is a page speed issue and you want to load the fonts asynchronously, see this article:
https://www.lockedownseo.com/load-google-fonts-asynchronously-for-page-speed/

Loading in Google Fonts via the <link> tag will ensure the fonts are rendered before the page is loaded.

Upvotes: 2

Related Questions