How to correctly include custom fonts to ionic project?

Question

In my project it is set scss->css compiling. And I can't pick up my custom fonts from the scss folder. Here's my folder structure for a better understanding.

| scss/
  |-- basics/
    |--_fonts.scss
  |-- fonts/
    |-- lineto-circular-book.woff
    |-- lineto-circular-medium.woff
| www
  |-- lib/
    |-- ionic/
      |-- css/         
      |-- fonts/

That's how the _fonts.scss looks like:

@charset "UTF-8";

@font-face {
  font-family: 'Circular-Medium';
  src: url('fonts/lineto-circular-medium.woff');
}

@font-face {
  font-family: 'Circular-Medium-Book';
  src: url('fonts/lineto-circular-book.woff');
}

I'm getting not found status. How can I solve this problem?

Answer 1

First, move the fonts/ folder into the www/ folder, so it looks like this.

| scss/
  |-- basics/
    |--_fonts.scss
| www
  |-- fonts/
    |-- lineto-circular-book.woff
    |-- lineto-circular-medium.woff

Then, if you aren't minifying the resources, then the paths might be off by one level. This should fix the references.

@font-face {
    font-family: 'Circular-Medium';
    src: url('../fonts/lineto-circular-medium.woff');
}

@font-face {
    font-family: 'Circular-Medium-Book';
    src: url('../fonts/lineto-circular-book.woff');
}

Answer 2

Add the format value, like this:

@font-face {
  font-family: 'Circular-Medium';
  src: url('fonts/lineto-circular-medium.woff') format('woff');
}

@font-face {
  font-family: 'Circular-Medium-Book';
  src: url('fonts/lineto-circular-book.woff') format('woff');
}