You need to sign in to do that
Don't have an account?
VinceC
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.
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.