How can I load a web font such as font awesome on page load?

Question

This question applies to situations where the web font isn't required on the main page and is initially inside a div set to display:none;

I have a web page that loads a hidden form via Javascript on click and this form uses a web font. My issue is that there is a one second delay when the user clicks to reveal the form, as it is at that moment Chrome downloads the woff2 file.

This isn't very nice for the user experience.

I need to preload the webfont as I have no usage for the font on the main page, so there is nothing to cause Chrome to fetch the woff2 file before the users clicks to reveal the hidden form.

I noticed that this doesn't matter if you're hosting the Font Awesome on your server or using the CDN.

I looked around on the internet to see what could be done, I tried all of the below and none of it helped, nothing caused the woff2 file to load on page load, it only ever loaded when the webpage actively needed the font.

Attempt 1: Preload

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">

or

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font">

Attempt 2: Prefetch

<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">

Attempt 3: CSS

@font-face {
    font-family: 'Font-Awesome';
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}

As I was looking around I started to see possible solutions with Javascript based loading, something I really didn't want to go near, so what are my options here?

Answer 1

I ended up with this simple solution, it hasn't been tested on anything other than Chrome but it's pretty basic for my use case, I can't imagine it not working on any modern browser.

I decided to force load the woff2 file by loading a font onto my main page, but ensure that the users can't see it.

As I already discovered, Chrome does not fetch resources that are required by any div that is set to display:none;

So here is my solution instead.

CSS

.div-fake-hidden {
    width:0px;
    height:0px;
    overflow:hidden;
}

HTML

<!-- This fake div hidden preloads our web font! -->
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div>

Now the browser loads the woff2 resource on page load, so that when my users click a button to reveal the hidden form, the web font loads immediately.