Fontello rendering on iOS, but not Android and desktop browsers

Question

I have an issue where my custom download of Fontello is loading on Chrome and Safari in iOS, but not on Android or desktop browsers (when resizing window). The font is being used for the icons in the mobile share buttons in each post.

Website: http://www.mtscollective.com

Mark-up:

<div>
    <ul class='mobile-share-bar'>
        <li><script>
            var strPostUrl = "<data:post.url/>";
            document.write("<a class='mobile-share-button icon-facebook' href='http://www.facebook.com/sharer.php?u="+strPostUrl+"' id='fb-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>

        <li><script>
            var strPostUrl = "<data:post.url/>";
            var strPostTitle = '<data:post.title/>';
            document.write("<a class='mobile-share-button icon-twitter' href='https://twitter.com/share?text="+strPostTitle+"&amp;url="+strPostUrl+"&amp;via=MTS_Collective' id='twitter-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>

        <li><script>
            var strPostUrl = "<data:post.url/>";
            var strPostTitle = '<data:post.title/>';
            var strNewUrl = strPostUrl.replace("http://","");
            var strNewTitle = strPostTitle.replace(/"/g, '"');
            document.write("<a class='mobile-share-button icon-tumblr' href='http://www.tumblr.com/share/link?url="+strNewUrl+"&amp;name="+strNewTitle+"' id='tumblr-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>
    </ul>
</div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Oswald);

    @font-face {
        font-family: 'fontello';
        src: url('http://cdn.mtscollective.com/fontello/font/fontello.eot?4448318');
        src: url('http://cdn.mtscollective.com/fontello/font/fontello.eot?4448318#iefix') format('embedded-opentype'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.woff?4448318') format('woff'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.ttf?4448318') format('truetype'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.svg?4448318#fontello') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"]:before, [class*=" icon-"]:before
    {
        font-family: "fontello";
        color: #fff;
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-right: .3em;
    }

    .icon-facebook:before
    {
        content: '\e806';
    }

    .icon-twitter:before
    {
        content: '\e809';
    }

    .icon-tumblr:before
    {
        content: '\e808';
    }

I'm really unsure what could be keeping it from working everywhere. I have cleared the cache on iOS to make sure it is reading the latest code.

Any help would be really appreciated!

Answer 1

Not loading in Chrome on OS X. Console shows: Font from origin 'http://cdn.mtscollective.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 'http://www.mtscollective.com' is therefore not allowed access.

Looks like you are probably having the same issue as this question: Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

I'd look at this answer: https://stackoverflow.com/a/26521650/4556503

You need to modify your .htaccess to allow Cross-Origin requests.