dileep keeppalli dileep keeppalli - 1 year ago 907
AngularJS Question

custom fonts are not seeing after the build in Ionic2

I am trying to add my own custom font files in ionic2 application, added @font-face and path of my custom font-files.

added it in app.variable.scss file.

@font-face {
font-family: my-fonts;
src: url("../fonts/my-fonts.eot") format("eot");
src: url("../fonts/my-fonts.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/my-fonts.woff") format("woff"), /* Modern Browsers */ url("../fonts/my-fonts.ttf") format("truetype");
font-weight: normal;
font-style: normal;

/* IE9 Compat Modes */`enter code here`
/* Safari, Android, iOS */

$font-family-md-base: "my-fonts";
$font-family-ios-base: "my-fonts";
$font-family-wp-base: "my-fonts";

Added in gulpfile.js :

gulp.task("fonts", function () {
return copyFonts({
src: [

When I build my application not able to see the this fonts in www/build/fonts folder itself.

Anything I am doing wrong?

Answer Source

I got the solution for this question.

Add a task for custom fonts in the gulpfile.js to include the customem font files when we build the Ionic 2 application.

gulp.task("customFonts", function () {
     return copyFonts({
       src: [

include the newly created task in the runSequesnce of gulp.task('watch', and gulp.task('build',

runSequence( ['sass', 'html', 'fonts', 'customFonts', 'scripts'],