Custom font usage

#1

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,

4 Likes
Updated CLI but now CSS files don't build
#2

Didn’t think to find solution too fast :smile:

Here is a steps:

On start I had Mensch-regular.ttf file.

  • Go to this LINK (ttf converter)
  • upload our 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');
}
  • add css to index.html

example:

 <link rel="stylesheet" href="fonts/mensch-regular/mensch-regular.css"
  • apply custom font:

_

 .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) :smile:

7 Likes
#3

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

#4

did you try to use the answer I posted?

#5

Yes. Still it is not working… :frowning:

1 Like
#6

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;
}
#7

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?

1 Like
#8

Hi @ceyquem,

Check above link. This may be help you.

#9

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:

https://code.google.com/p/android/issues/detail?can=2&q&colspec=ID+Type+Status+Owner+Summary+Stars&groupby&sort&id=73945

Hope people can push Google to fix the bug also on Android 4.0-4.3

#10

@mhartington do you have any idea ?
we have problem for non-english text and font-face not applied :frowning:

#11

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.

4 Likes
#12

@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

#13

Do you refer to it in the CSS as a relative path or what is the path to refer?

#14
@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.

#15

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.

1 Like
#16

Why would your url paths know to look in the fonts directory?

#17
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

ion-app {
    @include rtl() {
        font-family: 'Droid Arabic Kufi', serif !important;
    }    
}
1 Like
#18

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

#19

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");
#20

There are lots of Android Text Generator you can use them. I would recommend you to read this article it might help you.