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
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:
http://blog.nraboy.com/2014/10/use-font-awesome-glyph-icons-ionicframework/
Let me know if that helps you.
Regards,