Ionic-cli: Custom Fonts not showing in [email protected]

[JaneDawson]

Description:
After an update to version 3.9.2 my custom font is not shown anymore (at least on iOS). It is replaced by a standard font.

Rolling back to 3.8.1 makes everything working fine again.

Steps to Reproduce:
add the following to app.scss & add the *.ttf file to src/assets/fonts

@font-face {
    font-family: "custom-font";
    src: url(../assets/fonts/your-font-here.ttf) format("truetype");
}

.custom-style{
    font-family: "custom-font"!important;
}

Add this style to a div.

My ionic info:

cli packages: 

    @ionic/cli-utils  : 1.8.1
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.1 
    Node       : v8.3.0
    npm        : 5.3.0 
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 

[cingolanifede]

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

[amjadyahya]

Same on Android

[betatools]

I have same issue. Downgraded to 3.9.1 made it work again

cli packages: (node_modules)

@ionic/cli-utils  : 1.9.1
ionic (Ionic CLI) : 3.9.1

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.1
ios-sim           : 6.0.0
Node              : v6.11.0
npm               : 3.10.10
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b

[masandraki]

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

[amjadyahya]

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

[pfurini]

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

[Remco75]

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.

[isaiasas]

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

[BugHunter2k]

Same here

[gino8080]

same

[akshaydwivedi29]

the problem seems to be the ionic-scripts/webpack ignoring TTF files. I tried USING WOFF or WOFF2 format and everything works fine.

[Remco75]

pfff don't these guys have unit / regression tests for this kind of stuff....

[Madm0x]

+1

[shajeeck]

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!

[stalinkay]

+1

[janpio]

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

[Remco75]

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

[danbucholtz]

Hi all, we'll fix this now. Sorry, we have been very busy with some big internal changes to the Ionic project. Expect this to land in the next few days. Something must have changed in the Ionic CLI that broke the build process here. We'll check it out and solve it.

Thanks,
Dan

[sidthesloth92]

Fix will be welcome.

[danbucholtz]

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

[danbucholtz]

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

[gmarab]

Hi @danbucholtz, it's work!
Ionic CLI 3.9.2 and the @ionic/app-scripts@nightly.

[aksdevac]

installing nightly app scripts again fixed issue somehow don't know what happened before so removing above comment.

[mebibou]

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

[mebibou]

The steps I did:

1. I was on 3.9.1, everything worked
2. npm install [email protected] --save-exact
3. ionic serve => the fonts are present in www/assets/fonts folder
4. ionic cordova build android

=> only ionicons.woff and ionicons.woff2 in www/assets/fonts folder, same for platforms/android/assets/www/fonts

[mebibou]

Oh no ok got it, this issue talks about loading custom fonts, not the default Roboto font like #2707. So ignore my comments

[scarings]

hey @danbucholtz, after installing @ionic/app-scripts@nightly, i got error message TypeError: Cannot read property 'exports' of undefined. im using .TTF file

cli packages:

@ionic/cli-utils  : 1.10.2
ionic (Ionic CLI) : 3.10.3

global packages:

Cordova CLI : 7.0.1

local packages:

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

System:

ios-deploy : 1.9.1
Node       : v6.10.3
npm        : 3.10.10
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b

[scarings]

ignore my comments, after convert font from .ttf to woff, and installing latest app-script,its work now..

[Barathwaja]

@scarings so is 3.10.3 good?? but have to install nightly version of app-scripts?

[delian7]

3.12.0 ionic cli is still experiencing this problem when running ionic cordova build ios. All of my fonts are being removed. (see screenshot).

ionic info:

cli packages: (/Users/delian/seastatus/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.5.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    ios-sim : 6.1.2 
    Node    : v8.4.0
    npm     : 5.2.0 
    OS      : macOS Sierra
    Xcode   : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[Barathwaja]

Yes yes @delian7 3.12 is also experiencing same.. I have downgraded to 3.9.1 as of now.. that's the stable one I think.

[nabinkumarn]

Yes 3.9.1 is the only latest one that does not have this issue. Other all latter versions delete custom fonts and built in fonts i.e. roboto fonts on running cordova build android. I check each time new version arrives to see if the issue is fixed and get disappointed. Hope it is fixed soon.

[delian7]

@Barathwaja @nabinkumarn thanks for confirming. Hmm, wonder why this issue is closed? @danbucholtz should I make another issue with the current version number (3.12)?

[Barathwaja]

Try raising again let's see.. I have opened one in ionic-appscripts..

[hervehobbes]

Problem still exists with ionic cli 3.12.0 (under Windows).

I temporarily solved the problem with this forum post:
https://forum.ionicframework.com/t/failed-to-load-resource-roboto-regular-woff2/103078/3

[danbucholtz]

This will ship on Wednesday. Sorry for the delay.

Thanks,
Dan

[hervehobbes]

no problem, thank you very much

[FanFanFantastic]

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

[imhoffd]

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

[hervehobbes]

Hello,

In my case the problem seems to be solved.
Thank you very much.

[aksdevac]

@dwieeb It still does not load(with app-scripts 3.0.0 & cli 3.12.0) default roboto fonts on android prod build
If I run ionic cordova build android it copies all fonts in the android/assets/www/assets but if I run it with --prod flags it removes all fonts except ionicons & in android dev tools it shows many errors for roboto fonts not found. (I have not added any custom fonts & it works fine with cli 3.9.1)

[aksdevac]

@dwieeb I have checked code in this line 46 & as per code roboto font is not needed for android & it is removing it then I should not get console errors for it

[mebibou]

@dwieeb @aks0020 there is some confusion on those 2 different issues:

• loading custom font put in src/assets/fonts folder
• loading the default Roboto font on Android

This issue here talks about the first one, that I think was fixed successfully on latest ionic-cli version.
The second one is explained here and now works without the --prod flag

[aksdevac]

@mebibou but it should work with --prod flag so 2nd roboto issue is not fixed yet. & as per current code of app-script it is intentionally removing roboto font from android prod build so if its not needed for android it should not show error & if it is needed then code needs to be fixed.

[mebibou]

@aks0020 yes I agree but please move your comments to the correct issue is all i'm saying

[aksdevac]

@dwieeb Also if if I am understanding this code correctly

if (platform === 'android') {
      // remove noto-sans, roboto, and non-woff ionicons
      if (fileName.startsWith('noto-sans') || fileName.startsWith('roboto') || (isIonicons(fileName) && !isWoof(fileName))) {
        filesToDelete.add(fileName);
      }
    } else if (platform === 'ios') {
      // remove noto-sans, non-woff ionicons
      if (fileName.startsWith('noto-sans') || (fileName.startsWith('roboto') && !isWoof(fileName)) || (isIonicons(fileName) && !isWoof(fileName))) {
        filesToDelete.add(fileName);
      }
    }

is it possible to use custom font whose name starts with roboto or nato (suppose if someone wants to use nato-sans in iOS then it will remove it automatically) if not custom font issue is also not fixed .

[aksdevac]

after updating to ionic-angular 3.7.1 android roboto fonts errors with --prod are not showing for me so that issue is fixed for me.

[fbrun]

I use ionic-angular 3.7.1 and cordova-android 6.2.3. cli version 3.13.0
When i make a ionic cordova build android --prod --debug, i have the error : only my own css and ionicons are presents in assets/fonts (www and platforms android).

My ionic info
`cli packages: (/.../.nvm/versions/node/v6.11.0/lib/node_modules)

@ionic/cli-utils  : 1.13.0
ionic (Ionic CLI) : 3.13.0

global packages:

cordova (Cordova CLI) : 7.0.1 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.5
Node              : v6.11.0
npm               : 4.6.1 
OS                : Linux 4.4

`

[JaneDawson]

I'm experiencing a similar issue. Custom fonts are working now. However, now there are problems with the css files of plugins (like ionic2-super-tabs) that are not available when building with--prod.

Building with ionic cordova run android --aot --minifyjs --minifycss --optimizejs instead seems to work.

[RibesAlexandre]

Still does not work on android, the roboto font does not load.

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.2

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 5.0.13 
Node              : v7.5.0
npm               : 5.4.2 
OS                : macOS High Sierra
Xcode             : Xcode 9.0 Build version 9A235

Misc:

backend : pro

[janpio]

Github issues is not the right place for problems and questions. Post at https://forum.ionicframework.com/

[Remco75]

@janpio does that mean that this is not considered an issue at this point?

[JaneDawson]

I think it still is an issue. Roboto is not working for me either, when building with --prod flag.

[janpio]

Then create an issue about Roboto not loading. This an already closed issue is about custom fonts. No one will look at it and reopen it for a different problem.

[deepakrout]

I still see this is an issue. I am using ionic (Ionic CLI) : 3.13.1 and @ionic/app-scripts : 3.0.0
Cordova Platforms : ios 4.3.1
Ionic Framework : ionic-angular 3.7.1

BTW, The issue seems to be, though the fonts are getting copied to www/assets/fonts folder but they don't show up in the chrome browser source explorer under loocalhost:8100.

Please let me know if anyone has any update on this.

[Remco75]

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

[deepakrout]

I tried with @ionic/[email protected], didn't seem resolve the issue. @Remco75 Which version worked for you?

[JaneDawson]

I opened a new issue for roboto fonts not loading:
https://github.com/ionic-team/ionic-cli/issues/2822

[ravi-pandit14]

@akshaydwivedi29 in production build it throw the error in ionic 2

[akshaydwivedi29]

@ravi-pandit14 what kind of error you're facing in prod build? coz, for me, it works when I switched to woff or woff2 versions of the same fonts.

[Heena-Vora]

even not till now working

cli packages: (C:\Users\UserXx\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.9.0
    npm               : 5.8.0
    OS                : Windows 8.1

Environment Variables:

    ANDROID_HOME : C:\Users\UserXx\android-sdks

Misc:

    backend : pro

[ravi-pandit14]

i place the font in global variable.scss now its working for me perfectly
thank you.

On Sat, Mar 24, 2018 at 10:49 PM, Akshay Dwivedi [e-mail]
wrote:

@ravi-pandit14 https://github.com/ravi-pandit14 what kind of error
you're facing in prod build? coz, for me, it works when I switched to woff
or woff2 versions of the same fonts.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-cli/issues/2675#issuecomment-375909601,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdQtCMMnTx3JZLhdSDHejc9OdXlB9aMYks5thoA9gaJpZM4O8Ypo
.

[Genarito]

I still have the same problem with roboto

cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.7-201801172029
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.10.0
npm               : 6.0.0
OS                : Linux 4.15

[imhoffd]

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

[douglasjam]

Still not working as intended.
It just works if I have my fonts in assets instead of assets/fonts

Looking for a fix

[brodriguezs]

The worst part is that for me the only way that I found was, to create a new ionic project template blank (not Ionic 4), and migrate all my app to that (part by part), finally that works, with the latest app-scripts version 3.1.7. That was a long way =/ but it finally works for me.

[bunday]

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!

[ravi-pandit14]

Thank you

On Tue, Nov 20, 2018 at 5:52 PM Olayinka Zadat O [e-mail]
wrote:

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 srcassets 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!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-cli/issues/2675#issuecomment-440254831,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdQtCIKKY27qD0ntXuswsjxeasVKxo5_ks5uw_QXgaJpZM4O8Ypo
.

[Pratikshakhandagale]

Thanks @bunday this solution work for me.