@font-face loading issues in Android

ionic-v1
1

I am importing a custom font-face. As you can see, it loads fine on certain DOM elements, but not the two h1 and h2 tags on the opening screen. They load fine in web preview. They also loaded fine when using a system font. I’m wondering if it is caused by the fonts not being preloaded for immediate use and the DOM renders before it loads the font on those particular elements.

I’ve tried many css loading techniques. The actual h1 and h2 elements are loading, just not the text. When I specify a system font, it loads fine.

If i swipe/hold the screen, voila, the text magically appears.

Does anyone know why this might be happening and if so, what the solution would be?

image
Pasted image823×721 49.3 KB

2

Hi ,

I actually use different fonts in my app and all load and work in ios and android 100% well.

  • I use templatecache (html2js)for my views
  • i don’t really use h tags inside my app

Is nor a solution but you can

3

@rflea Wow…so I replaced the <h1> and <h2> tags with <div> tags, and all the sudden the text loads when the app boots up. Any idea why this would happen? Also, why do you avoid using h tags?

I didn’t try html2js yet, as I haven’t set up a grunt workflow for this project yet. Why do you use template caching - any reason? I looked into the performance benefits and a few people in the forums said there was no added benefit. Is there another reason or is this untrue in your experience?

Thanks so much for the reply, I at least now have a temporary workaround which fixes the problem. It was driving me absolutely nuts.

4

@rflea So, it only works if I leave the <div> tags unstyled. As soon as I try to style them, it disappears again. So this won’t work. However, I noticed completely removing the Ionic.css file actually fixes it. So it might be some sort of conflict within the two css files which I’ve yet to discover. I’ll keep trying and update if I figure it out.

1 Like
5

Hi thequiet ,

The first reason was my emulator get´s crazy with request to load templates. (I use a custom made platform without cordova or phonegap);

In reality i can´t compare the performance but if you read the ionic docs and all related with the cache of views you will have more information about that , In my case i prefer this way because when i build the app i just have the index.html file and templatecache.js to load in my app and because we are in a mobile app if you have all views loaded at moment you start the app no need any other request

About the problem with fonts maybe is a style conflit try change the order you add it in your index could help .

About using h for the fonts , i just changed this tags for custom classes because i use some mixins and other things to make my workflow easy and without any conflit with previous css.

Thanks

1 Like
6

@rflea, cool, thanks for the info on template caching, I’ll give that a try.

I’ve already tried about every possible order for the css, no luck :confused:. But the fact that when I remove the Ionic css file, it works, is definitely a red flag. Still troubleshooting… Thanks again.

7

Ok, I got to the bottom of it. These four css styles in ionic.css seem to be the problem.

.content {
  position: relative; }

    .scroll-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      margin-top: -1px;
      padding-top: 1px;
      margin-bottom: -1px;
      width: auto;
      height: auto; }
    
    .menu .scroll-content.scroll-content-false {
      z-index: 11; }
    
    .scroll-view {
      position: relative;
      display: block;
      overflow: hidden;
      margin-top: -1px; }

As soon as I remove them, the text appears as normal. However I did not want to mess with the styles in this file, so instead I disable scroll on <ion-content> and <ion-pane> by using <ion-content scroll="false"> and <ion-pane scroll="false">, respectively. Seems to be working fine now.