search

bokmann / font-awesome-rails

the font-awesome font bundled as an asset for the rails asset pipeline
http://fortawesome.github.com/Font-Awesome/
MIT License
1.86k stars 244 forks source link

Preloading? #192

Closed julien51 closed 6 years ago

julien51 commented 6 years ago

Hi! Thanks for this gem! It is generally considered good practice to preload some resources to make rendering pages faster. By default fonts are only loaded when they are "detected" in the CSS which can be significantly delayed.

Do you think it would make sense to provide a helper to preload the font file?

rmm5t commented 6 years ago

Could you please elaborate a bit more? Which of the font assets would get automatically preloaded by the helper? Are you suggesting the helper would only preload the font asset that is a particular match for the current browser? ...because I don't think it would necessarily help to preload all possible font asset file types. Or is preload smart enough to recognize this for varying font assets?

https://github.com/bokmann/font-awesome-rails/blob/master/app/assets/stylesheets/font-awesome.css.erb#L7-L15

julien51 commented 6 years ago

Currently, for the broweser to start downloading the font files, it has to "know" about them, this means that it needs first to download the CSS files and parse them. If the browser knew about the font files faster it could download them in parallel.

I have actually solved that issue in my end by adding the following to our HTML layout fil (in the <head> section):

  <link rel="preload" href="<%= font_path('fontawesome-webfont.woff2') %>" as="font" type="font/woff2" crossorigin>

Maybe it is the simplest solution...

rmm5t commented 6 years ago

Cool. I'm going to close this out for now. If others feel like solving this in a more generic way (not sure about the best way to handle the possibility of different font file types), we can revisit at that time.

rodrigobdz commented 6 years ago

I'm getting the following error in the Chrome console when preloading font-awesome:

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

@julien51 do you know how to remove the warning?