How to set font-style and font-size for all pages in ionic 3?


#1

Friends,
I am developing a mobile app first time . When I create apk using

ionic cordova run android

I got one style and when created using

ionic cordova run android – prod

got small font-size than first.

How I can change the font size and font style for all pages in my app.
Which font is better and how it can include ?

Please advise

Thanks
Anes


#2

Can you send your variable.scss


#3

Sure Please find here : variables.scss

my app.scss is : app.scss

please advise…


#4

First you must import Style at this path
F:\Project\DemoApp\node_modules\ionic-angular\fonts

image

Then add font into Variable.scss before @import “roboto”;(we get this as default )
@import “tradegothic”;

And add this lines in app.scss

ion-app.ios {
font-family: TradeGothic !important;
font-size: 15px;
}

ion-app.android {
font-family: TradeGothic !important;
font-size: 15px;
}

then re run app


#5

Dear @mohanbugganab,

Where I can download this “tradegothic” font related files ?
When I download “tradegothic” font from font download
I could not find tradegothic.scss …

My fonts list is

Problem view in chrome is : (you can see the fonts are too small)
there is some missing fonts error . But I put that fonts in path will remove it on apk --prod creation .

Please advise

Thanks
Anes


#6

You must choose one font from customer. if it you have .otf file you must create .ttf and .woff in online conversion tool.
If fonts are Purchasable make sure you purchase it or user free versions available.

then create .scss like above fonts folder (\node_modules\ionic-angular\fonts) roboto.scss on your own.

Note: Name it as your own and give same name at (@import “tradegothic”:wink: here.


#7

Dear @mohanbugganab,

How to create corresponding .scss of font. Just copy the robto.scss is enough ?


#8

Yes, But you must rename the file and change content with your .otf and .ttf and .woff.

Or you can create file in Visual studio Code also.


#9

Friends,

I temporarily solve it using
add “config”: {
“ionic_purge_unused_fonts”: false
},

to my package.json.

Thanks @atif