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;
}

Benefactress

2 things I want to ask : you want fontawesome.eot?6840zz it should be like fontawesome.eot?v=1.1.0 some version. Secondly how many files do you have and which IDE you are using ? – Phira

@NaveedRamzan What's 68400zz in query string? Maybe there's a logic behind it. And how IDE can be related to all of this? – Benefactress

I was thinking if you can find & replace option and add version to all these sort of links. Is not that way ? – Phira

Thanks. But I do not want to replace. All I want is to understand the logic behind those magic numbers (68400z) and hashes(#iefix), how they are related to urls and how to add version. Any thoughts ? – Benefactress

Ah ok right. Well those version number or the code 6840z or any thing is to mention the build number. in case of version number we add ver=1 or 1.1 or 1.1.1 means we are working on the build number 1 and having minor fixes. when we will work on next sprint or build its version will start from ver=2. Regarding code, its a random number generated from that version number to just make separate. – Phira

Thanks, what about the #iefix and other hashes? – Benefactress

Well, that is also a code to manage versions. For reference of hash tag : electrictoolbox.com/download-embed-fonts-font-face – Phira

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.

Personalism

Anything I can add to increase my chances of getting that elusive green check? ;) – Personalism

Sure, I have just forgotten ;) – Benefactress

Hi, does this query string is needed when we use preload with font url? <link rel="preload" src="fonts/customicons/icomoon.ttf?b4x7s" type="font/ttf" /> ??? – Ljubljana