Beta7 typography.css

Ionic Framework
1

New projects with current CLI are creating beta5 so I then removed node_modules and manually changed package to upgrade to beta 7 and npm installed.
Now I’m up to Beta7.

The first issue is that the global.scss is calling for @ionic/angular/css/colors.css which breaks the build.
I copied the file from a previous project and that is resolved (although - why? Is it just a missing file? )

But past that problem I get to the meat of the topic title:
@ionic/angular/css/typography.css
Beta7 - typography.css makes my default font serif/times while the previous versions kept roboto or some sans serif.
Images below.

The beta7 starts with html{ while the previous versions used :root

If I replace the :root way in my beta7 project all is as it was but should I not be doing that?

Beta7 - typography.css:

html{font-family:var(--ion-font-family)}a{background-color:transparent;color:var(--ion-color-primary, #3880ff)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:var(--ion-header-size, 26px)}h2{margin-top:18px;font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px))}h3{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 2)}h4{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 3)}h5{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 4)}h6{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 5)}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}

Beta5/6 - typography.css:
:root[mode=ios]{--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}:root[mode=md]{--ion-font-family: "Roboto", "Helvetica Neue", sans-serif;font-family:"Roboto", "Helvetica Neue", sans-serif}a{background-color:transparent;color:var(--ion-color-primary, #3880ff)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:var(--ion-header-size, 26px)}h2{margin-top:18px;font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px))}h3{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 2)}h4{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 3)}h5{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 4)}h6{font-size:calc(var(--ion-header-size, 26px) - var(--ion-header-step, 2px) * 5)}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}

Also, notice that the ion-router-outlet.ion-content cuts off the text. I have to edit the ion-router-outlet.ion-content to increase the height to see it.

Here is a fresh project started ( CLI builds Beta5 ):
image

Here is after upgrade to Beta7:
image

2

Once having updated to beta.7, did you also update the breaking changes introduced with beta.6? colors.css has been moved to core.css, maybe that solves the problem?

3

Okay, that explains the colors issue - thanks.

Any thought on why the font issue?

4

Not really, I could track the change

The source is that issue https://github.com/ionic-team/ionic/issues/15170 followed by that PR https://github.com/ionic-team/ionic/pull/15220

But when I do this I think I come to the conclusion it should still be roboto no?

In core.css

html.ios {
 --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
html.md {
 --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}
1 Like
5

I don’t know, now I can’t get it to use Roboto at all.
I think I taxed my system and need to reboot my roboto.

When you create a new Beta 7 project from CLI, does it go to Beta 7 or 5?
When you do get to 7 - which font defaults for you?

Likely just me and mine.

6

Yep from scratch it’s still beta.5, but you know, they are going so fast, they released 3 betas this week, I understand there is sometimes a small delay of a couple of days till they update the start app

then about the second question, when I run it strait away without changes I get “Roboto, Helevetica Neue, sans-serif” with beta.5

Now after upgrade to beta.7 I still get “Roboto, Helevetica Neue, sans-serif” too

Tested on element ion-content

To upgrade I did

npm remove @ionic-angular --save
npm install   @ionic-angular@4.0.0-beta.7 --save

then edited manually global.scss to change color to core.css paying attention to have it sorted first

7

Understood about the beta releases pouring out this week - which is good.

Are you suggesting the color to core.css is affecting the font?
I thought it was n the typography.css.

8

Yes, see my previous msg Beta7 typography.css

“In core.css”…

9

Ok, thanks a Ton!
I’ll have to try it tomorrow - I’m neck deep in plumbing & countertop replacement.

1 Like
10

Good luck with plumbing, let me know tomorrow if it worked or not

11

I mean both tasks, plumbing and typography :wink:

12

Ok, not unlike my Ionic4 apps, the plumbing is at a stage where I can use it, it just ain’t pretty yet.

It seems that just replacing colors.css and typography.css with core.css does the trick.
Cheers & TY

13

Cool, congrats for the plumbing and Ionic :wink:

Ps note I think you should just replace colors.css, typography.css should remain