CODEWITHSUNDEEP
cssionic-frameworkfontssassionic3
Matt Tanner
Matt Tanner

Reputation: 315

Ionic 3, need help importing custom font (brand new project)

I'm trying to import a custom icon font called "Picons Thin" into my Ionic project. I put the font formats titled piconsthin-webfont.ttf, piconsthin-webfont.woff, and piconsthin-webfont.woff2 into the www/assets/fonts folder, and created a piconsthin-webfont.scss file in the same folder which contains the following: 

$piconsthin-webfont-font-path: $font-path !default;

@font-face {
  font-family: "piconsthin";
  src: local("piconsthin"),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff2') format('woff2'),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff') format('woff'),
       url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

I then went to variables.scss and saw the fonts section at the bottom that was importing roboto and noto-sans, and assumed this was calling the scss files in the fonts folder. So I added my own line: 

@import "piconsthin-webfont";

But that just gives an error in Ionic that says "File to import not found or unreadable: piconsthin-webfont".

I've tried just putting the picons @font-face css into one of the other font scss files that I knew could be found, and I've tried putting the @font-face css into the main src/app/app.scss file, but nothing I do makes the font show up on the front end... what am I doing wrong?? What step am I missing??

Upvotes: 1

Views: 682

Answers (1)

Tobi Agbola
Tobi Agbola

Reputation: 11

Put your fonts in the source folder (src/assets/fonts/CHESSMASTER8000_BOLD.ttf) then connect it in the variables.scss file like this 

@font-face {
  font-family: "Chessmaster-8000";
  font-style: bold;
  src: url('../assets/fonts/CHESSMASTER8000_BOLD.woff');
}

Upvotes: 1

Related Questions