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.

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?

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

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 .

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

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

yes…but its not helping us out in android.

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.

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

[image] mhartington: SCSS no i’m not using scss files ,i’m just overriding css as h4ck3rviv3k said.

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: [image] Create Your Own @font-face Kits | Font Squirrel Create Your Own @font-face Kits by uploading the fonts you want to use. Let me know if this helps at all.

Fonts in ionic 0.9.24

uncategorized

mouhsine March 29, 2014, 7:09pm 10

no i’m not using scss files ,i’m just overriding css as h4ck3rviv3k said.

Different font support in Ionic framework for Android

Topic		Replies	Views
Custom font in ionic not working in device ionic-v3	2	7067	November 9, 2017
Custom font usage uncategorized	20	59228	February 19, 2020
Different font support in Ionic framework for Android ionic-v1	0	2127	September 26, 2014
Ionic 2 rc4 custom font ionic-v3	2	1305	December 19, 2016
How to change the font of all texts in ionic? uncategorized	14	82834	June 11, 2020

Fonts in ionic 0.9.24

Related topics