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
}