import ionic3 font in variables

Question

inside the file variables.scss of the ionic3 project it does the import of two fonts: roboto and noto-sans as follows:

@import "roboto";
@import "noto-sans";

Where do these fonts come from? How to import raleway font? I have tried to put this line and it does not work:

@import "raleway";

Ivar Reukers Ivar Reukers · Accepted Answer · 2018-04-24T13:53:17

So I just checked my node_modules and the roboto and noto-sans fonts are stored in node_modules/ionic-angular/fonts/

If you want to use the raleway font, you should be in possession of the .ttf, .woff, and .woff2 files. If you only have the .ttf font, check out FontSquirrel's font files generator

Location: src/assets/fonts/Raleway.ttf etc.

Then you can create your font (app.component.scss or variables.scss)

@font-face {
    font-family: 'Raleway';
    font-weight: 200;
    src: url('../assets/fonts/Raleway.ttf') format('truetype');
    src: url('../assets/fonts/Raleway.woff') format('woff');
    src: url('../assets/fonts/Raleway.woff2') format('woff2');
}

Now you can use your font:

p { font-family: "Raleway" !important; }

Or change the default font of your ionic app (variables.scss)

$font-family-md-base: "Raleway";
$font-family-ios-base: "Raleway";
$font-family-wp-base: "Raleway";

Answer Credit

import ionic3 font in variables

1 Answers