How to solve the problem of caching fonts and files in css?

Hossein Azizdokht 0
Viewed 17

I use the font icon to display the icons, but when I update the fonts and add a new icon to the font, because the fonts are cached, they are difficult to display and the cache must be emptied. How can I solve this problem?

scss-mixins sass reactjs css
1 Answers

You can use sass in your source. Use its Random() feature, as follows: Every time the source is built, its version will be changed and the browser will call it without cache.

$version: random(9999);

@font-face {
  font-family: "font-icon";
  src: url("#{$YourFontPath}/fonticon.eot?v=#{$version}");
  src: url("#{$YourFontPath}/fonticon.eot?#iefix&v=#{$version}")
      format("embedded-opentype"),
    url("#{$YourFontPath}/fonticon.ttf?v=#{$version}") format("truetype"),
    url("#{$YourFontPath}/fonticon.woff?v=#{$version}") format("woff"),
    url("#{$YourFontPath}/fonticon.svg?#afam&v=#{$version}") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Your generated css will be:

@font-face {
  font-family: "font-icon";
  src: url('fonticon.eot?v=3889');
  src: url('fonticon.eot?#iefix&v=3889') format("embedded-opentype"), url('fonticon.ttf?v=3889') format("truetype"), url('fonticon.woff?v=3889') format("woff"), url('fonticon.svg?#afam&v=3889') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Hossein Azizdokht0
Related