Web font cookie header header
I am having a problem when I try to load authenticated HTML content from another domain via CORS. This content contains links to images, styles and fonts.
I can load html, images, styles, etc., but for some reason my cookie headers are not passed to any web fonts, resulting in a 403 forbidden error.
If after logging in, I try to access the webfont directly, I can do that and it loads fine, but it doesn't work inside the @ font-face at-rule in our CSS.
How can I get the browser to send on a cookie when it asks for web fonts? Is it possible? Something is wrong?
Thank!
source to share
The question is quite old, but I only had the same problem in Chrome for Android.
Not tested, but suggests IOS browsers can show this issue as well.
I decided to add css that includes the font with jquery after the authentication is complete.
Something like:
$.when(my-function).done(function() {
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'css/main.css'));
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'css/font-awesome.min.css'));
});
source to share