iPad/Mac Safari won't load the font

Question

I've been facing this strange issue on SAFARI Browser of iPad and Mac Machine with my application(deployed on IIS). Though, whenever I try editing the CSS in Resources tab of Developer Tools, the font suddenly loads itself and then stays. Even a single space edit in the CSS would load the fonts. Everything works fine on Safari for Windows.

Apart from that, If I keep working on pages of my Application on Safari, the fonts get loaded on pages after a random time(time varies from 10 seconds to 10 minutes or more) and then stay there until the cache is wiped off.

I've tried several things to fix this:

Removing the quotes from @font-face declaration as I've read somewhere that Safari won't load fonts with quotes. No success, albeit, firefox stopped rendering the fonts as quotes are necessary there.
Checked MIME-Type on IIS for .svg file types. No Success.
Verified ID in .svg declaration from the font file. No Success.
Extracted @font-face declarations of all the fonts into separate file and included it as the top most CSS declaration in <head> tag.
Tried removing and pushing the CSS tag after the browser is detected as SAFARI. This thing worked but is a nasty hack. The code is quoted below

CODE:

var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (isSafari) {
    if ($('#fontCss').length) {
        $('#fontCss').remove();
        $('head').append("<link rel='stylesheet' href='assets/css/fontAwesome/font-awesome.css'>");
        alert('This is Safari');
    }
}

Can you guys please suggest things which I can try to fix this issue. I've tried making test pages and fiddles with same fonts and tested them on same devices, everything works fine on demo pages but not with my application.

score 0 · Accepted Answer · edited May 23 '17 at 12:29

The only thing which seems to work is removing and pushing the link tag with CSS file after the page is loaded. My application is single page web-application with AngularJS, so I need not worry about the JS getting executed on each change in screen, until the page is explicitly refreshed.

I extracted all the @font-face declarations(including font-awesome's @font-face) from their corresponding files and kept them in two separate files, viz. fonts.css and fonts_safari.css. Then included fonts.css in index.html:

<link rel="stylesheet" id="cssReplace" href="assets/css/app/fonts.css">

Then just before the end of the body tag, I added this JS snippet which will replace the declaration of CSS file after the page is loaded.

<script>
    $(document).ready(function () {
        setTimeout(function () {
            var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
            if (isSafari) {
                if ($('#cssReplace').length) {
                    $('#cssReplace').remove();
                    $('head').append("<link rel='stylesheet' href='assets/css/app/fonts_safari.css'>");
                }
            }
        }, 10);
    });
</script>

PS: I'm using setTimeout to take the advantage of javascript being a scripting language which works on single thread. It somehow doesn't work without it on my application. Read This answer on the use of setTimeout for further reference.

iPad/Mac Safari won't load the font

1 Answers1