Concat query string to font-face url

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:

1. 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.

2. 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.

3. 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.