Fonts in ionic 0.9.24

1

Hey guys I am new to ionic framework.
Facing a problem in applying fonts and strange thing is if there is one alphabet in tag then it is applied else not.

Kindly help me out.

2

Hey welcome to Ionic! I’m having a hard time understanding what you mean by “if there is one alphabet in tag then it is applied else not”. Would you mind posting some sample code?

3

@font-face {
font-family: GretelFont; /* Edit this line */
src: url(…/fonts/trade-gothic-lt-condensed-no-18.ttf) format(“truetype”);
}

I am using external fonts like this,It works fine in Beta version but not in alpha version & I have to continue using alpha version only.

4

mhartingtom i m facing a problem fonts seem to work locally on chrome but when publishing the app and installing it on android fonts down show ,am i doing anything wrong .

1 Like
5

@Ionic, are you applying the font-family to the elements you want to effect? Check out this codepen,

@mouhsine, so when you install the app with the custom font on an android device, it doesn’t show the custom font??

6

yups @mhartington the issue which @mouhsine is facing I am facing the same…Help us out.

7

yes…but its not helping us out in android.

8

Alright, lets try to establish how everyone is defining the font family and applying them to the elements. Also are you guys doing this in the SCSS files or just overriding them in the a separate CSS file.

This could be an issue but I want to verify everything before opening an issue.

9

yes for using our custom fonts we are defining like
@font-face {
font-family: customfont; /* Edit this line */
src: url(…/fonts/mycustomfont.ttf) format(“truetype”);
}

and where we have to apply we simply call font-family:customfont !important still we are not able to get our custom font on android, in IOS it is working fine

please let us know the fix for this issue

10

no i’m not using scss files ,i’m just overriding css as h​4ck​3rviv​3k said.

1 Like
11

Hmm the only thing I can think of is that android can use the .tff font file. I haven’t used a custom font in some time now so I haven’t had this problem. Depending on your version of android, you may need to provide a different font file.

Like this:

    @font-face {
        font-family: 'droid_sansregular';
        src: url('droidsans-webfont.eot');
        src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
             url('droidsans-webfont.woff') format('woff'),
             url('droidsans-webfont.ttf') format('truetype'),
             url('droidsans-webfont.svg#droid_sansregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,{
  font-family:droid_sansregular !important;
}

The best thing to get all the versions of the font is to use font squirrel, which is free :wink:

Let me know if this helps at all.

12

Have tried this too but still facing the issue in android phones…Any other solution…?

13

What version of android are you targeting?

14

android 4.3 device samsung s3

15

Other than providing the css above, I’m not to sure what the issue could be. Best thing could be to use winre, which is a kind of add on for remote debugging Cordova projects on older android devices. See if the headings are even getting the custom font-family applied to them.

I remember some time ago that android was weird about calling local files for embed web-views…
I have an android 4.1 device at my office so I will give it a try tomorrow and let you guys know.

16

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");
1 Like