custom Font is not loading in ionic framework

Question

I want to apply Open Sans font in my Ionic Project. I have use this code inside my SCSS folder where my custom scss file (settings.sccs and other scss files) are located (demoProject\scss_setting.scss)

@font-face {
  font-family: 'Open Sans';
  src: url('../www/fonts/opensans-regular-webfont.eot');
  src: url('../www/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../www/fonts/opensans-regular-webfont.woff') format('woff'),
  url('../www/fonts/opensans-regular-webfont.ttf') format('truetype'),
  url('../www/fonts/opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}
body{
 font-family: 'Open Sans';
}

fonts are located here(demoProject\www\fonts)

and try to apply on whole body but console of the browser is showing

 GET http://localhost:8100/www/fonts/opensans-regular-webfont.woff 
:8100/www/fonts/opensans-regular-webfont.ttf:1
GET http://localhost:8100/www/fonts/opensans-regular-webfont.ttf 

Solution 1

I believe you're going too far back in the directory chain.

I think you want something more like this:

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/opensans-regular-webfont.woff') format('woff'),
    url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
    url('../fonts/opensans-regular-webfont.svg') format('svg');
    font-weight: 200;
}
body{
    font-family: 'Open Sans';
}

Here is a tutorial for adding Font Awesome into your project, which is a custom font:

https://www.thepolyglotdeveloper.com/2014/10/use-font-awesome-glyph-icons-ionicframework/

Let me know if that helps you.

Regards,

Solution 2

Your fonts should be located in demoproject/www/lib/ionic/fonts

and then referred to from the css (in it's default location www/css/stylesheet.css like so:

@font-face {
  font-family: 'Open Sans';
  src: url('../lib/ionic/fonts/opensans-regular-webfont.eot');
  src: url('../lib/ionic/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../lib/ionic/fonts/opensans-regular-webfont.woff') format('woff'),
  url('../lib/ionic/fonts/opensans-regular-webfont.ttf') format('truetype'),
  url('../lib/ionic/fonts/opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}
body{
 font-family: 'Open Sans';
}

Comments

[bre]

you are everywhere when i'm looking for some solution about ionic. Great Job!

[Nic Raboy]

Glad I could help :-)

[Abhishek Dhote]

Thanks Nic, was trying for a couple of days finally got it working :)

[daraul]

I think @NicRaboy's article has moved to thepolyglotdeveloper.com/2014/10/…