Concat query string to font-face url - css

Question

To avoid browser's cache, I want to concat version querystring to my #font-face's url. There are lots of urls. How to this in right way?
#font-face {
font-family: 'fontawesome';
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz');
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype'),
url('/styles/fonts/fontawesome/fontawesome.ttf?6840zz') format('truetype'),
url('/styles/fonts/fontawesome/fontawesome.woff?6840zz') format('woff'),
url('/styles/fonts/fontawesome/fontawesome.svg?6840zz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 1

Most implementations of Font Awesome will append versioned query strings to the #font-face font paths. These versioned query strings will bust the cache when the font is updated to a new version. That is, when you update the font the versioned query string will change from something like ?v=4.7.0 to ?v=4.7.1.
In most cases you won't need to do anything extra as most implementations will handle this for you. Keep in mind, many other #font-face generators and packages will also append a version param. Here are a few examples:
Download the Font Awesome kit
If you download the Font Awesome kit from http://fontawesome.io/ the included font-awesome.css file will have versioned query strings attached to the paths. Ex.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
the ?v=4.7.0 is the versioned query string. This version number will change if you download a new version of Font Awesome down the road.
Font Awesome CDN
If you use the CDN implementation you'll get a <script> to include, like
This will import the following CSS:
#font-face {
font-family: 'FontAwesome';
src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot');
src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff') format('woff'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'),
url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
The URLs to the Font Awesome CDN has the version number included, and this will change when updated, breaking the cache and eliminating the need for appending a versioned query parameter.
Using Sass or Less
If you're using the Less/Sass files the versioned query string will be added. Ex.
#font-face {
font-family: 'FontAwesome';
src: url('#{fa-font-path}/fontawesome-webfont.eot?v=#{fa-version}');
src: url('#{fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{fa-version}') format('embedded-opentype'),
url('#{fa-font-path}/fontawesome-webfont.woff2?v=#{fa-version}') format('woff2'),
url('#{fa-font-path}/fontawesome-webfont.woff?v=#{fa-version}') format('woff'),
url('#{fa-font-path}/fontawesome-webfont.ttf?v=#{fa-version}') format('truetype'),
url('#{fa-font-path}/fontawesome-webfont.svg?v=#{fa-version}#fontawesomeregular') format('svg');
// src: url('#{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
The #{fa-version} will append the current version (currently 4.7.0 to the font path. This version number will update when the font is updated. In this sense you can update all the version query params at once by changing the fa-version variable.
#iefix
Regarding the #iefix hash, this is a method of fixing an issue in IE8 and below when defining multiple font formats within a single src. If you need your font to work in IE8 and below you need to add the #iefix (or any hash`) so those browsers don't throw errors. More on that in this SO question.
Other #font-face Fonts and Implementations
If you're using a font other than Font Awesome, or another implementation, you can append a hash onto the font paths to create your own cache-bust. It's fairly common to see a date string appended, like 01302017, which can be updated manually or via a build script when needed.