12

I am using Font-Awesome in my lightning components and using font-awesome icons in lightning components. It was working fine before 7th Jan 2017, but when today I Logged In into sandbox fonts are not working and showing error in console

Access to Font at 'https://XXXX--XXXXX.cs26.my.salesforce.com/visualforce/sess…53669000%2FAll_Resources%2Ffonts%2Ffontawesome-webfont.woff%3Fv%3D4.2.0' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Is there any way to includes fonts directly in lightning components as we include CSS and JS files?

  • Make sure static resource accessibility is set to public. – itzmukeshy7 Jan 9 '17 at 12:27
  • @itzmukeshy7 thanks for prompt response, its already public. – Imran Qureshi Jan 9 '17 at 12:32
  • May be there is a URL change. Try to whitelist the domain in CORS. – Saroj Bera Jan 9 '17 at 12:34
  • @SarojBera URL is same, and I also tried by adding into CORS but no luck. – Imran Qureshi Jan 9 '17 at 13:06
  • Can you let us know where you changes the Font face. I mean in which file. Thanks, Prdp – pradeep Feb 13 '17 at 22:33
7

I found the solution and changed the URL for the font files from this:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

To this:

@font-face {
    font-family: 'FontAwesome';
    src: url('/resource/resource_name/fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url'/resource/resource_name/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url(''/resource/resource_name/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('/resource/resource_name/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('/resource/resource_name/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.