How to download a web font, such as a font that is amazing when loading a page?

Question

This question relates to situations where a web font is not required on the main page and is initially inside a div set to display:none;

I have a webpage that loads a hidden form through Javascript on click, and this form uses a web font. My problem is that there is one second delay when the user clicks to open the form, since at that moment Chrome is loading the woff2 file.

This is not very pleasant for the user.

I need to preload webfont since I don’t have to use the font on the main page, so there is nothing to get Chrome to get the woff2 file before users click to open the hidden form.

I noticed that it doesn’t matter if you host Font Awesome on your server or use a CDN.

I looked on the Internet to see what can be done, I tried everything below, and none of this helped, nothing caused the woff2 file to load to load the page, it only ever loaded when the web page actively needs a 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 looked around, I began to see possible solutions with Javascript-based loading, something that I really didn’t want to bring closer, so what are my options?

Answer 1

I ended up with this simple solution, it has not been tested for anything other than Chrome, but it is quite simple for my use, I can not imagine that it does not work in any modern browser.

I decided to force the download of the woff2 file by uploading the font to my home page, but make sure that users do not see it.

As I already found out, Chrome does not retrieve the resources that are required for any div set to display:none;

So here is my solution.

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 to load the page, so when my users click the button to open the hidden form, the web font loads immediately.

Answer 2

you don't need a hidden div to make your font work. While you are using a supported browser (image from w3schools ), the css @font-face rule should work fine.

You can also add additional font formats as follows:

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

Answer 3

You can try using Web Font Loader: https://github.com/typekit/webfontloader

Web Font Loader gives you extra control when using related fonts via @ font-face. It provides a common interface for downloading fonts regardless of the source, and then adds a standard set of events that you can use to control downloads. The web font downloader can download fonts from Google Fonts, Typekit, Fonts.com and Fontdeck, as well as stand-alone web fonts. It is jointly developed by Google and Typekit.