Bulletproof @Font-Face syntax subtleties

Question

I'm sorry for the mistakes I've made, I'm not Englishman. I want to find out the difference between these two examples:

//generated by icomoon.io
@font-face {
  font-family: icomoon;
  src:url('font.eot?-w9xgwa');
  src:url('font.eot?#iefix-w9xgwa') format('embedded-opentype'),
  url('font.woff?-w9xgwa') format('woff'),
  url('font.ttf?-w9xgwa') format('truetype'),
  url('font.svg?-w9xgwa#icomoon') format('svg');
}

//generated by my Sass mixin
@font-face {
  font-family: icomoon;
  src: url('font.eot');
  src: url('font.eot?#iefix') format('embedded-opentype'),
  url('font.woff') format('woff'),
  url('font.ttf') format('truetype'),
  url('font.svg#icomoon') format('svg');
}

Both examples work and icons are rendered correctly, but I have some doubts about parameters which are appended at the end of each font's url (eg: font.ext?-blabla or font.ext#blabla). What do they mean?

Do I make mistake when I use incorrect parameters at the end of the url?
The reason of asking question: I want to make SASS mixin, that help me easily include custom fonts generated by different resources (icomoon.io, fontello.com etc).

Answer 1

Icomoon appends query string parameters (everything after the ?, in this case -w9xgwa), to either distinguish the font you were served from others generated, or more likely, to break the cache when your font is updated. Your font when served to users is likely cached (so they don't have to download it each time they view your page). Appending the query string, and changing it will cause the user agent to download it again.

I would recommend hard-coding the css generated by icomoon, and changing it when you update the font. If you don't plan on ever changing it (or needing to break the cache of a user viewing your font), then your probably fine using the mixin generated version.