Import Custom Fonts in Ionic 2

Question

I have used custom fonts in Ionic 2. When I do ionic serve, the fonts are visible in the browser. But, after building apk (ionic build android), the fonts are not reflected in the android app. Don't mind helping!!

Answer 1

The fonts in the build disappers every time as the gulp build cleans the build folder everytime. To avoid this you need to include the gulp tasks in the gulpfile.ts.

Modify the below changes to your gulpfile.ts.

Include gulp task for adding icon css and fonts to your build

 gulp.task('myCss', function(){
  return gulp.src('path-to-your-font-lib/style.css')
      .pipe(gulp.dest('www/build/css'))
   });
 gulp.task('myFonts', function(){
  return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
      .pipe(gulp.dest('www/build/fonts'))
   });

Modify your gulp build and watch task as follows (Adding your font and css on watch and build)

 gulp.task('watch', ['clean'], function(done){
   //existing ionic2 code
 }
 gulp.task('build', ['clean','myCss','myFonts'], function(done){
  //existing ionic2 code
 }