[SalesForce] Font-Awesome fonts are not loading after Spring’17 release

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?

Best Answer

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
}
Related Topic