Search code examples
iosangularjscordovawebfontswebfont-loader

Foreign characters displaying delayed on cordova ios application

We are using Webfont Loader to load google fonts. And inside the active callback of WebFont.load we load our main script and bootstrap angular.js application.

<script type="text/javascript">
WebFontConfig = {
    google: {
        families: ['Open Sans:400,700,700i,400i:latin-ext']
    },
    active: function() {
        var mainScript = document.createElement('script');
        mainScript.src = "/js/main.js";
        mainScript.onload = function() {
            angular.bootstrap(document, ['cob']);
        }

        document.body.appendChild(mainScript);
    }
};

WebFont.load(WebFontConfig);
</script>

To make browser use default fonts until the google font file loaded, we set fonts for .wf-active class

html.wf-active {
    font-family: 'Open Sans', sans-serif;
}

Inside angular run, we switch apploaded and clear screen from loaders and show the application.

angular.module('mymodule')
    .run([function() {
        $rootScope.appLoaded = true;
    }
]);

html

<body>
    <div class="app-loader" ng-hide="appLoaded">loading...</div>
    <div class="page-container" ng-if="appLoaded">
        application loaded. <button>GİRİŞ</button>
    </div>
</body>

We see "loading..." until the font files loaded, then application bootstraps successfully. But the button text is rendered as "G R " for a couple of seconds, after a while 'İ' and 'Ş' characters are loaded into screen and we see GİRİŞ on button.

screen capture of button

I am sure the font file is loaded before application bootstraps, because the font doesn't change after the application is loaded.

May be irrelevant but, I got some image files on the page and foreign characters are rendered with the image files. So there is some kind of a wierd screen render latency.

We only have this issue on iOS application, I have tested it on iPhone 6 and 6s, and on xcode simulators. This works as intended on browsers (safari, chrome and firefox) and on android application we create with the same cordova project.

Solution

  • After trying various preload methods, just as I was considering to give it up, I came accross to a fact here

    most browsers download fonts when they're used in a page rather than when they're declared in CSS.

    It seems like latin-ext subset of the font is delayed until it is used inside the page.

    I have solved the issue by putting a dummy character (İ) that will make it download latin-ext subset on load screen