Ionic 4 custom fonts

Ionic Framework ionic-v3
1

Hello Folks,

I am trying to add custom fonts to my ionic 4 app,
i am getting error.

ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/global.scss)
[ng] Module Error (from ./node_modules/postcss-loader/src/index.js):
[ng] (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\OMS-Jayesh\hawat2\hawat2\src\global.scss:33:9: Can’t resolve ‘…assets/fonts/Axiforma-Light.woff2’ in ‘C:\Users\OMS-Jayesh\hawat2\hawat2\src’

Below is my code

I am adding this in Global.css also font files added in the respective folder

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-Regular.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-Regular.woff') format('woff'),
        url('..assets/fonts/Axiforma-Regular.svg#Axiforma-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-Book.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-Book.woff') format('woff'),
        url('..assets/fonts/Axiforma-Book.svg#Axiforma-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-Light.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-Light.woff') format('woff'),
        url('..assets/fonts/Axiforma-Light.svg#Axiforma-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-Bold.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-Bold.woff') format('woff'),
        url('..assets/fonts/Axiforma-Bold.svg#Axiforma-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-Medium.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-Medium.woff') format('woff'),
        url('..assets/fonts/Axiforma-Medium.svg#Axiforma-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Axiforma';
    src: url('..assets/fonts/Axiforma-SemiBold.woff2') format('woff2'),
        url('..assets/fonts/Axiforma-SemiBold.woff') format('woff'),
        url('..assets/fonts/Axiforma-SemiBold.svg#Axiforma-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

Any help will be appreciated

1 Like
2

change the URL to url(‘assets/fonts/Axiforma-Regular.woff2’). Your current url with “…assets” leads to nowhere!

3 Likes
3

@morphist Thanks man, it works :v:

2 Likes
4

Please why was it written 3 times?
@font-face{}
@font-face{}
@font-face{}

1 Like
5

@SalimSulaiman because font-weight can be different, like it can be 400, 600 etc