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.
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.
