Search code examples
cssfontsfont-awesomefont-facewebfonts

Best Practice to include Font-Awesome at BEST Performance

I used font-awesome in my project by include this CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Google Page Speed not seem to like it. enter image description here

Not to mentioned, I only used 5 icons

view-source:https://www.bunlongheng.com/

enter image description here

Solution

  • from a quick search in the internet i am afraid that font awesome doesn't have any service like what you are looking for :( but there are some solutions !

    if you are using a frame work like React , Vue or Angular you are able to import only the fonts you need

    How can I import only one icon from fontawesome?

    like here ^

    if you are using vanilla javascript you will have to use other website to help you with that like

    https://icomoon.io/app

    or

    https://fontello.com/

    A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.

    There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.

    Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.

    Blockquote

    there is also a way to download the svg file to a js file and then importing it , but it is also complicated so i think the fastest way would be to use the websites that are mentioned at the beginning