3

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.

Varun Sridharan
  • 1,983
  • 2
  • 20
  • 54
  • Basically it is there for browser support, it does not mean all users will have to load all those fonts, see: https://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face – caiovisk Jul 18 '18 at 01:28
  • @caiovisk thanks but i want to keep my project 2MB which means i can't pack full FontAwesome – Varun Sridharan Jul 18 '18 at 01:32
  • woff seems to be the format you'd want to use. This should help you: https://stackoverflow.com/questions/37086562/what-kind-of-font-files-do-i-need-for-modern-browsers-android-and-ios / https://css-tricks.com/understanding-web-fonts-getting/ – joknawe Jul 18 '18 at 02:02
  • depending on the amount of icons you will actually be using, you may want to consider just using those individual icon .svg files directly (no font files) – joknawe Jul 18 '18 at 02:06
  • @joknawe since my project is a framework for WP so i can't define which icons are required. so in fontawesome just the WOFF2 is good right ? – Varun Sridharan Jul 18 '18 at 02:32
  • WOFF (not WOFF2) has more support across browsers. – joknawe Jul 18 '18 at 02:40
  • @Joknawe. thanks so then i can include both WOFF & WOFF2 because it comes around 200KB for me – Varun Sridharan Jul 18 '18 at 02:55

1 Answers1

1

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.

Parapluie
  • 714
  • 1
  • 7
  • 22
  • Since i am working on a custom WP Framework i can't force user to use less glyps – Varun Sridharan Jul 19 '18 at 14:31
  • @Varun Sridharan Are you saying that you can choose the font format, but not the font itself? (Or as joknawe wisely suggests, an image-based solution.) – Parapluie Jul 19 '18 at 15:06
  • i am not sure. what you mean. this is my framework ( http://github.com/wponion/dev) in which i would like to include not only fontawesome but also some top icon fonts. but the size dose matters me. – Varun Sridharan Jul 20 '18 at 01:20