Cross-Origin Request Blocked when loading local file

Question

Firefox 68 contains a security patch which restricts the kinds of files that pages can load (and methods of loading) when you open them from a file:// URL. This change was made to prevent exfiltration of valuable data within reach of a local page, as demonstrated in an available exploit. More info: https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

I filed a bug yesterday proposing that fonts be allowed, but it will take time to implement. For now, you can roll back the patch as follows:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste uniq and pause while the list is filtered

(3) Double-click the privacy.file_unique_origin preference to switch the value from true to false

To mitigate the vulnerability: If you save pages from untrusted sites in a separate folder, e.g., Downloads\Untrusted, then it would be difficult for an attacker to find any valuable content using local file links.

As mentioned in the comment section, I installed a web server. In my case I used tomcat8 and using that I was able to display the icons even in firefox.

The easiest and safe way to overcome the temporary problem (It should be fixed in the next 68.0.2 Firefox update) with web fonts not loaded when previewing locally is to install .ttf or .otf version and link to it in your @font-face declaration. On Windows, go to /Control Panel/Fonts/ and check the exact name of your font, copy to the local('') value.

Example:

@font-face {    
   font-family: 'Clear Sans';    
   font-style: normal;    
   font-weight: 700;    
   src: local('Clear Sans Bold'),    
      url('../fonts/woff2-convert/ClearSans-Bold.woff2') format('woff2'),    
      url('../fonts/WOFF/ClearSans-Bold.woff') format('woff'),     
      url('../fonts/TTF/ClearSans-Bold.ttf') format('truetype')    
}