Customize font not showing on all devices

#1

i did a font customization for my app using @font-face, added a css file containing the @font-face, also put the fonts files withing same folder and include that css in my index.html, the font work on the web , some devices Galaxy Note 4 , and on some genymotion emulator devices like Galaxy S5, but it didnt show on other devices like Galaxy Note 1 both real device and genymotion emulation.

any advice ?

#2

any solution please ??

#3

I have had the same issue in the past and I found the issue being which Android version I was running. On newer Androids it was working but on older ones it did not.

If I do not remember incorrectly the solution was the order in which the different font files are imported in the css. I just checked my old css files and see that I have the font-face like this:

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-light.svg#latolight') format('svg');
  src: url('../fonts/lato-light.eot');
  src: url('../fonts/lato-light.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/lato-light.woff') format('woff'), 
  url('../fonts/lato-light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

Note that the svg file is the first one. Try this out and see if it works :smile:

#4

@Olle i tried the above and still the same :grin:

#5

I once had a problem where the font file contained errors. Opening the file with FontForge and saving it as a new font fixed it for me.

#6

@andreas_hegenberg already tried and replaced the font with another one, also same, teh problem show only with android 4.1, both readl device and genymotion image.

#7

Mine is working fine, open a network tab in chrome and make sure that path is right (i.e. no errors about font-file is 404)

My code is like this:

@font-face {
  font-family: "q-icons";
  src:url("../fonts/q-icons.eot");
  src:url("../fonts/q-icons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/q-icons.woff") format("woff"),
    url("../fonts/q-icons.ttf") format("truetype"),
    url("../fonts/q-icons.svg#q-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
#8

@yurinondual when am using the Genymotion emulator and checking the adb logcat, no error is shown related to missing font or anything, just the font is not the same !!?

#9

To resolve this issue, put fonts in lib/fonts folder, not just in fonts folder of css.

Then use (in your css):

src: url("..lib/ionic/fonts/fontfile.eot");
#10

I have followed your approach but it still won’t reflect on actual device.

#11

Hello. I am currently encountering this issue… Is there any updates / solutions? :frowning:

1 Like
#12

My fonts aren’t loading on android either. S5 with Android 5.0. They load fine on browser and on ios. I’ve tried all of the tricks suggested on these forums… putting fonts in lib/ionic/fonts… putting the svg format first… Surely there is an officially approved/standard method for using fonts within ionic apps?! Why is this such a struggle. There has been many a forum topic on this.