Custom Fonts in Ionic3

Ionic Framework ionic-v3
5

I’ve got my fonts under

src/assets/fonts/Lato-300
src/assets/fonts/Lato-700

etc.

Under each directory I’ve got all the font, like

Lato-300.eot
Lato-300.svg
Lato-300.ttf
Lato-300.woff
Lato-300.woff2

Then as first lines in app.component.scss I’ve got the loading of these fonts, like

@font-face {
font-family: 'Lato';
font-weight: 300;
font-style: normal;
src: url('../assets/fonts/Lato-300/Lato-300.eot');
src: url('../assets/fonts/Lato-300/Lato-300.eot?#iefix') format('embedded-opentype'),
local('Lato Light'),
local('Lato-300'),
url('../assets/fonts/Lato-300/Lato-300.woff2') format('woff2'),
url('../assets/fonts/Lato-300/Lato-300.woff') format('woff'),
url('../assets/fonts/Lato-300/Lato-300.ttf') format('truetype'),
url('../assets/fonts/Lato-300/Lato-300.svg#Lato') format('svg');
}

and finally, as said above, in variables.scss I’ve got

$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";
15 Likes