defer font-face fonts loading after document ready

Is there any way to prevent fetching custom fonts before document.开发者_StackOverflowready and load fonts after that? This helps making page page load time(the time browser spinner shows)

You could try this:

$(document).ready(function() {
    var font_settings = "   <style type='text/css'> @font-face {font-family: YourFont; src: url('fonts/YourFont.ttf');}</style>";
 $("head").append(font_settings);});

Note that if this does get you what you're looking for, you'll probably end up seeing your text flash from the default font face to whatever custom one you've specified.

Take a look at newly available font-display property which

allows you to customize how web fonts are displayed when the page is being rendered

@font-face {
    ...
    font-display: swap
}