While working on an app in Ionic Framework, I encountered a peculiar issue.
https://i.stack.imgur.com/xk8uD.png
In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Montserrat) loads everywhere except underneath the image and on the initial screen. However, it loads perfectly in web preview and when using a system font like "Roboto". I suspect that the fonts may not be preloaded for immediate use, causing the DOM to render before loading the font for those specific elements.
I have set the background to red, which confirms that the content is being delivered; however, the text does not seem to be rendering. The text is in plain HTML format, and injecting it via an expression did not make a difference. Surprisingly, the imported font for the ionic-icons works flawlessly.
Interestingly, swiping the screen makes the text magically appear. This phenomenon does not occur elsewhere after the initial occurrence.
Below is the CSS code for the @font-face just in case something is missing...
@font-face {
font-family: 'montserratregular';
src: url('montserrat-regular-webfont.eot#montserratregular');
src: url('montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-regular-webfont.woff2#montserratregular') format('woff2'),
url('montserrat-regular-webfont.woff#montserratregular') format('woff'),
url('montserrat-regular-webfont.ttf#montserratregular') format('truetype'),
url('montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'montserratregular', 'Helvetica Neue', 'Arial', sans-serif!important;
font-weight: normal !important;
}
...and here is the corresponding HTML snippet:
<div ng-click="testTime()" class="fullwidth-container start-test begin" ng-if="reactionFrame === 0">
<img src="img/touch.svg" class="tap-icon">
<h1 class="test-prompt">Tap to begin</h1>
<h3>Please follow the instructions on the next screen as quickly as possible.</h3>
</div>
If anyone has insights on why this issue is occurring and how to resolve it, I would greatly appreciate your input.