Most Awesome font implementations will add version strings to @font-face strings. These lines with the request version will overload the cache when the font is updated to the new version. That is, when you update the font, the line with the version of the request will change from something like ?v=4.7.0 to ?v=4.7.1 .
In most cases, you do not need to do anything extra, as most implementations will handle this for you. Keep in mind that many other generators and @font-face packages will also add a version parameter. Here are some examples:
Download the Awesome Font Kit
If you download the Awesome font kit from http://fontawesome.io/ , the attached font-awesome.css will have version lines associated with 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; }
?v=4.7.0 - a string with the version of the request. This version number will change if you download the new version of Font Awesome along the way.
Awesome CDN Font
If you use a CDN implementation, you will get <script> to include, for example
This imports 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 version number is included in the Font Awesome CDN URLs and this will change during the upgrade, breaking the cache and eliminating the need to add a request version parameter.
Using Sass or Less
If you are using Less / Sass files, a line with the version of the request will be added. Example.
@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; }
@{fa-version} will add the current version (currently 4.7.0 to the font path. This version number will be updated when the font is updated. In this sense, you can immediately update all version request parameters by changing fa-version .
#iefix
As for the #iefix hash, this is a fix for 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 #iefix (or any hash) so that these browsers do not give errors. Read more about this in the SO question .
Other fonts @@ font-face
If you use a font other than Font Awesome, or another implementation, you can add a hash in the font path to create your own cache bust. It is often enough to see an added date string, for example 01302017 , which can be updated manually or using the build script when necessary.