ionic-cli: Custom Fonts not showing in ionic-cli@3.9.2

Solution: Move custom fonts (I use ttf format) from /assets/fonts to /assets folder and update paths in scss file:

@font-face { font-family: YourFont; src: url("…/assets/YourFont.ttf"); }

It works for me on IOS and Android with Ionic CLI 3.9.2

In theory, this issue should be fixed in this commit.

Can you please validate for me and let me know if things are working better?

npm install @ionic/app-scripts@nightly

If everything is all good, we’ll release this version early next week.

Thanks, Dan

Not only the custom fonts, but also all default ionic fonts e.i. roboto font family.

pfff don’t these guys have unit / regression tests for this kind of stuff…

@janpio True, I will look into that. But open-source or not, I expect from a piece of software created by a business a certain standard, and I was surprised about the amount of bugs after each release. But I will try to be more constructive (and will try to find a solution for this)

@Remco75

pfff don’t these guys have unit / regression tests for this kind of stuff…

As everything is open source you can check that yourself and also submit a PR to fix any missing tests so this doesn’t happen in the future.

Same here, this is really a bug. For now I will move my stuff to a different directory. But this is really starting to piss me off (excuse my language) EVERY update that is pushed will have me starting to fear what I will encounter on the first run. I NEVER works out of the box. </end-rant>

Everyone,

I dove into this issue this afternoon and have cracked the case 🕵️ .

So here’s what’s going on:

This code has existed for a really long time but we did not start setting the platform and target since recently. This change was part of our move towards eventual support of a PWA target.

The code became active once the target and platform were set. The code has always looked at the www/assets/fonts directory to purge ionic specific fonts that aren’t needed on a given platform. We did this due to complaints about unnecessary bytes in .apk and .ipa files (iOS and Android application binaries). We do the same thing with source maps on prod builds.

Our code was never smart to distinguish between ionic provided fonts and user fonts. Now that we know people are re-using the www/assets/fonts directory, we will update the code to be smart and ONLY remove ionic provided fonts. I’ll add a few tests here so we can ensure this won’t regress in the future.

I’ll have a nightly available soon, and we’ll release this properly next week.

Thanks, Dan

Not only the custom fonts, but also all default ionic fonts e.i. roboto font family.

Same for me, very annoying… rolling back to 3.9.1 resolved the issue

This is not resolved, still happening with me as well: ionic cli 3.13.1, same behaviour as @deepakrout

Update: it seems to be related to the version of app-scrips: updating them resolved it for me

I don’t think this is fixed, I am using 3.10.3 and when running ionic serve the fonts are now loading correctly (and they appear under ./www/assets/fonts folder), but when then running ionic cordova run android the fonts are not present under ./platforms/android/assets/www/fonts and they actually get removed from the ./www/assets/fonts folder.

I had to downgrade again to 3.9.1 and it worked straight away

every asset file stopped loaded when using relative paths in index.html with src, href = '../assets/folder/etc' on devices using ionic cordova run

changing to 'assets/folder/etc' works, but now default fonts are not loading!

There is an easy workaround which I’m going to show you, for the sake of this, I will be using the Font Family “Lato”

1. Move your fonts into a folder in the src\assets folder

2. Go into your variable.scss and add the following code @font-face { font-family: Lato; src: url("../assets/fonts/Lato-Regular.ttf"); } The source here is the part to the font you’ve slated in 1 above

3. Next specify the Font Family name for web, android, ios and windows For Web and Android: $font-family-md-base: "Lato"; For iOS: $font-family-ios-base: "Lato"; For Windows Phone: $font-family-wp-base: "Lato";

4. Save and try it out!

Does this workaround not work? https://github.com/ionic-team/ionic-cli/issues/2822#issuecomment-340078265

@ionic/app-scripts 3.0.0 is out, which addresses this issue. Please update w/ npm i @ionic/app-scripts@latest

any updates now?, I did ionic build browser -prod and now my web page on the serve is complaining about the fonts

This will ship on Wednesday. Sorry for the delay.

Thanks, Dan

Same here

Same issue here. Ionic default fonts can’t be found on Android under 3.9.2

I am having the same problem. My ionic info: @ionic/cli-utils : 1.9.2 ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.3.0

System:

Node : v6.10.1
npm  : 5.3.0
OS   : Windows 10