Custom font usage

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.

21

Generically, you can use a custom font using @font-face in your CSS. Here’s a very basic example:

@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

`.classname {`
`    font-family: 'YourFontName';`
`}`

.classname {
    font-family: 'YourFontName';
}
``
(.classname is your selector).

Note that certain font-formats don’t work on all browsers; you can use special text’s generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don’t have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn’t possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren’t very practical.

I hope that helped!

22