[Ionic 4.0.0-rc] Custom Fonts returning 404

Ionic Framework
1

Hi everyone!

After I updated my Ionic project to version 4.0.0-rc, I getting 404 from my custom font, and I can’t make it work.

Someone is having this problem?

In Github Releases I was looking for something changed about css, but aparently dont have.

2

How do you load your font? How to you import it in css?

p.s.: just tested my app, fonts are still ok with RC

1 Like
3

My project structure (css and fonts) is:

src
– assets
----- fonts
-------- font-name
----------- font-archives
– scss
------ global.scss

Inside this global.scss I have:

@font-face {
  font-family: 'Flexo';
  font-weight: 900;
  src: url('/src/assets/fonts/fonte-flexonte-flexo/Flexo-Black.otf')
    format('opentype');
}

This global.scss (that I created) it’s been called in global.scss (root)

@import "./assets/scss/global";

And in my variable.scss I’m setting this font:
--ion-font-family: 'Flexo', sans-serif;

There is a better/right way to import custom fonts?

Obs: In older versions was working. What change could be interfer in this problem?

4

I do the following

variable.scss (https://github.com/fluster/fluster-app/blob/master/src/theme/variables.scss)

* {
  // Fonts
font-family: "Lato";
--ion-font-family: "Lato";
}

and the Google fonts itself as in https://github.com/fluster/fluster-app/blob/master/src/theme/fonts.scss

and in angular.json I copy all the assets (just in case)

"assets": [
{
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
...
1 Like
5

Now it’s working.

Just a path error:
‘/src/assets/fonts/fonte-flexo/Flexo-Medium.otf’ to ‘’/assets/fonts/fonte-flexo/Flexo-Medium.otf’

I don’t know why was working before.

Thanks for help!

6

Well done, I didn’t noticed neither! Cool to hear it work out now :tada: