+ Start a Discussion
VinceCVinceC 

Salesforce Iconic Fonts

having an issue with fonts not loading from static resource, here are the details, 

I’m using Bootstrap as an example as its a very known quantity, but it applies to other iconic fonts I’ve tried to host as well. Loading FontAwesome from a CDN works as expected.
 
My static assets are structured like this:
 
fonts/
css/
icons/
Images/
 
css/style.css contains the following lines:
                                @font-face { 
      font-family: 'Glyphicons Halflings’; 
      src: url('../fonts/glyphicons-halflings-regular.eot'); 
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype’),
           url('../fonts/glyphicons-halflings-regular.woff') format('woff’),
           url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
           url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
      }
Those font files are present and properly named. The font is then used for CSS classes to create the icons, all very standard. 
 
I zipped up the files and created a Static Resource, which is then imported into a VisualForce page. However, attempting to use one of the CSS icon classes results in the following error (in Chrome’s console):
 
Font from origin 'https://siliconlabs--full.cs21.my.salesforce.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://siliconlabs--full--c.cs21.visual.force.com' is therefore not allowed access.
 
A square shows up in place of the icon. I don’t know if its related to the custom domain, or what exactly. But its rather odd considering the assets are in the same zip file.