Search code examples
cssperformancefontsfont-facewebfonts

Which Fontfile to use in a website?


Guys i am working on a custom project where i need font awesome But when checking fontawesome font files i can see they provide a lot of options

  1. JS
  2. SVG With JS
  3. WebFonts

As for as i know i should use WebFonts but in that i can see there are lot of font file.

  1. eot
  2. svg
  3. ttf
  4. woff
  5. woff2

is all the font formats are required ? Can we use only SVG ?

Actually i need my project in total of 2MB if i add all the font files it taking too much space.


Solution

  • As of this posting your selected typeface, FontAwesome , contains 3,332 different glyphs. You are more than correct to assume that loading this file five times over will take up some serious system resources.

    However…

    Often when using a webfont for icons, we only use a portion of the many icons defined in the font. If you are only using three or four glyphs from FontAwesome, then loading those five times should be a light-as-a-feather job for your system.

    How to do this? Use a font-subsetting service. Free and easy-to-follow instructions on their sites. There are several, but personally I've had success with fontello: http://fontello.com

    I have subsetted (verb?) about 20-25 icons from FontAwesome (more than I needed) to provide simple icons on my site, and the file sizes are under 60KB, collectively.

    And of course, the reason we load these five times over? To maximize cross-browser compatibility. Plain and simple. This does it.