Hello,
I know its not Ionic problem, anyways maybe someone solved this issue.
I have custom font:
@font-face {
font-family: "wmMensch";
src: url("../fonts/Mensch-regular.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
However it doesn’t work on devices. In Chrome/Firefox … works well.
I started to debug application and got:
From Resources tab:
Does someone know how to solve this?
Thanks,
Didn’t think to find solution too fast 
Here is a steps:
On start I had Mensch-regular.ttf file.
Mensch-regular.ttf file and you get back zip file with following content:
The mensch-regular.css content should be:
@font-face {
font-family: 'MenschMenschRegular';
src: url('mensch-regular.eot');
src: url('mensch-regular.eot') format('embedded-opentype'),
url('mensch-regular.woff') format('woff'),
url('mensch-regular.ttf') format('truetype'),
url('mensch-regular.svg#MenschMenschRegular') format('svg');
}
index.html
example:
<link rel="stylesheet" href="fonts/mensch-regular/mensch-regular.css"
_
.bar.bar-stable .title{
font-family: "MenschMenschRegular";
font-size: 21px;
color: #fff;
}
That’s all. works like charm (at least for Nexus 4, Samsung 3/4)
I have same issue …
I try that approach. In browser it is working. Still it is not working in device… Is there any other solution ??
Hello!
I also tried that solution, I can see that it works in the web browser playing with the inspector, but it does not work on my Android Device (Galaxy Nexus). I also tried to host it on a webserver to check if it could be a problem with finding the resource file on the android device, I can see the font is loaded (takes a second to show the text) but the font does not work eventually (missing non latin characters).
I am using the style.css file to override the font-family of the default css file:
/* Empty. Add your own CSS if you like */
body, .ionic-body {
font-family: "SayWeb", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "SayWeb", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.tab-item {
font-family: "SayWeb", "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
input, button, select, textarea {
font-family: "SayWeb", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.roboto {
font-family: "SayWeb", "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.roboto input {
font-family: "SayWeb", "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
I understand better the issue. Actually this is not the font that cannot load properly, but the unicode characters that do not display, whathever font we use. To check that I loaded a web symbols font and it worked well for most of the characters, except those which are not standard latin ones.
Unfortunately I did not get to the solution yet, adding the utf-8 meta tag in the header did not help (it was already there).
Any other suggestion?
Hello!
Thanks for that link, unfortunately for my case it did not work. I found the root cause of the problem which is a bug in Android 4.x that is fixed in Android 4.4 to handle the @font-face with the stock browser:
Hope people can push Google to fix the bug also on Android 4.0-4.3
@mhartington do you have any idea ?
we have problem for non-english text and font-face not applied 
I had the same problem, but I’m quite sure that this bug is not the error.
You have to drop the fonts in the folder
www/lib/ionic/fonts
and refer to it from the css file. Otherwise it won’t work on mobile!
It works always though in the browser when you drop in anywhere in the project.
@math I tried your solution too …!! keeping it in www/lib/ionic/fonts is not workng…!!
It works on browser’s and ionic lab too !! but not on device android 4.2
@font-face {
font-family: 'RalewayThin';
src: url("../fonts/RalewayThin.eot");
src: url("../fonts/RalewayThin.eot") format("embedded-opentype"), url("../fonts/RalewayThin.woff") format("woff"), url("../fonts/RalewayThin.ttf") format("truetype"), url("../fonts/RalewayThin.svg#RalewayThin") format("svg"); }
this is how i do it, works like a charm on both android and ios, and doesnt require the font to be in the ionic font folder.
the font folder is just in my www.
I think it may be important to make sure the ‘font-family’ name matches the native fonts name.
To check the font’s name in Windows you can just double click the .ttf file and see what value ‘Font name’ has.
Lets say I have a font I want to use in my Ionic app and I check it’s .ttf file and it’s font name is ‘Flouc Font’. I would make sure the .ttf is in the correct folder (www/fonts) in my case. Then edit the ‘style.css’ file to include the following definition:
@font-face {
font-family: "Flouc Font";
src: url("../fonts/floucFont.ttf")
}
Note that I have explicitly set the ‘font-family’ value to the value I obtained by inspecting the font file.
I hope this helps, I struggled to get mine working but now it works fine.
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
ion-app {
@include rtl() {
font-family: 'Droid Arabic Kufi', serif !important;
}
}
Hi guys,
Please check your font name with extension into your font folder. font name and extension should be same into your src: url. check your name with uppercase or not.
expl. if your font name link this : SQUADAONE-REGULAR.TTF
than your src: url should be this
@font-face {
font-family: ‘squadone’;
src: url(’…/fonts/SQUADAONE-REGULAR.TTF’) format(‘truetype’);
}
if font name like this : MontserratRegular.ttf
than
@font-face {
font-family: ‘squadone’;
src: url(’…/fonts/MontserratRegular.ttf’) format(‘truetype’);
}
Thanks
I think it is related to the font path. Try look at the www directory.
You can try replace code like this:
src: url("../fonts/Mensch-regular.ttf") format("opentype");
with code like this:
src: url("../assets/fonts/Mensch-regular.ttf") format("opentype");
There are lots of Android Text Generator you can use them. I would recommend you to read this article it might help you.