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?