18

In my Ionic2 project, I put my fonts (ttf format) in the folder www/build/fonts. But when I build the app, the fonts disappear.

How can I do ?

14 Answers 14

23

Don't place your fonts in node_modules or build folder. node_modules folder gets update on npm install or npm update and build folder gets created with each build command.

Best possible way, that i am currently using with a production app is to put your fonts inside www/fonts folder and reference them inside your /app/themes/app.core.scss like below.

@font-face {
    font-family: 'gurbaniakharregular';
    src: url('../../fonts/gurbaniakhar.ttf.eot');
    src: url('../../fonts/gurbaniakhar.ttf.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/gurbaniakhar.ttf.woff2') format('woff2'),
         url('../../fonts/gurbaniakhar.ttf.woff') format('woff'),
         url('../../fonts/gurbaniakhar.ttf.ttf') format('truetype'),
         url('../../fonts/gurbaniakhar.ttf.svg#gurbaniakharregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
3
  • Thanks so much. This was exactly what I needed. As I'm new to Ionic, I'm not sure how legit this is, but I put the the above font-face code into a fonts.css file in the same directory with the actual fonts (www/fonts). Then added a single import to that css file in app.core.scss. This way I can keep all of the font code/config in a single location if I need to make any changes. No need to remember to update app.core.scss.
    – davesaus
    Commented Jul 21, 2016 at 19:44
  • yeah. that makes sense. But my idea was to tell why the other answers will cause you problem later on. Your idea is more like how to manage css in better way. But still it is very much relevant in this context. Thanks! Commented Aug 13, 2016 at 16:28
  • The www folder is always regenerated by the ionic cli, so it is better to put your files in the src folder from which ionic creates the www directory. Commented Aug 28, 2017 at 7:16
15

In the latest Ionic2 RC, this seems to have moved to somewhere under src/assets, probably src/assets/fonts. References to these files in yours SCSS files (as per @indermohan-singh) are relative to the CSS file so will be like url("../assets/fonts/aleo-italic-webfont.woff2").

Everything under src/assets is copied over during build, so that's a good place for other things you'll need, i.e. images.

4

Now that the dust has settled with Ionic 2 / Angular 2 I hope this will be the right answer for a while.

I downloaded "Varela Round" from Google fonts and simplified the file name, but the font name stayed the same.

Add your font to ./src/assets/fonts. Edit ./src/theme/variables.scss. Under the "Fonts" section at the bottom, import your font:

@import '../assets/fonts/varela-round.ttf';

Then in your regular CSS:

  font-family: 'Varela Round';

Edit for non-Google fonts:

  • This doesn't work with .otf and I'm unsure about .woff. You may need to run your font through a converter.
  • If you aren't sure of the font name, install it on your local system first and use that name. I just did this with a font called "Fertigo" that installed as "Fertigo Pro"

EDIT

I could not get this solution to work on iOS, but the following does.

First off, I apologize for forgetting where I had the Varela Round font. I got this working with a different font and am using that as an example here.

Add the font as mentioned above, but don't bother importing it in variables.scss. Instead, add the following to app/app.scss:

@font-face {
  font-family: 'Fertigo';
  font-style: normal;
  font-weight: 400;
  src: local('Fertigo Pro'), local('Fertigo-Pro'), url(../assets/fonts/fertigo.ttf) format('woff2');
}

If format('woff2'); doesn't work, you may need to try truetype instead.

3
  • 2
    Thank you. This is the simplest correct answer for Ionic 2 as of May 2017
    – JasonSmith
    Commented May 9, 2017 at 12:19
  • However, I believe you mean to import varela-round.scss, not the .ttf file directly, correct?
    – JasonSmith
    Commented May 9, 2017 at 12:32
  • @JasonSmith I downloaded the .ttf font from Google, not an .scss file. This worked for me. Maybe you're not supposed to do this for some cross-browser reason. But I'm not too worried about that since that's a non-issue with Ionic apps.
    – leetheguy
    Commented May 9, 2017 at 16:42
3

In Ionic 3.4 put your font in asset/fonts (the path is specified in src/theme/variables.scss).

In src/app/app.scss insert the font-face

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway'), local('Raleway-Regular'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
}

Finally use your font in src/theme/variables.scss overriding the sass variables

$font-family-base: 'Raleway';
$font-family-ios-base: 'Raleway';
$font-family-md-base: 'Raleway';
$font-family-wp-base: 'Raleway';
0
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
     }
    
1

In ionic v2.1.0 www folder is generated every time you build your project.

you have to put your fonts in src/assets folder like below.

@font-face {
    font-family: 'montserratregular';
    src: url('../assets/montserrat/montserrat-regular-webfont.eot');
    src: url('../assets/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
         url('../assets/montserrat/montserrat-regular-webfont.woff') format('woff'),
         url('../assets/montserrat/montserrat-regular-webfont.ttf') format('truetype'),
         url('../assets/montserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
1

The best way to add own fonts is using gulp. I add my custom fonts in directory app/theme/fonts and add this source to the gulp plugin ionic-gulp-fonts-copy in file gulpfile.js.

// add own src 
gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'app/theme/fonts/**/*.+(ttf|woff|woff2)'
    ],
    dest: 'www/build/fonts'
  })
});

The first line in src is default, second is custom. After this, you can declare your font with css, e. g.

/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}

Try it out!

1

On Ionic 3.4, Look into the variables.scss, Ionic team already preset font path $font-path: "../assets/fonts"; So just put your font files under assets/fonts folder, then add following code into variables.scss

ion-app.ios { font-family: "your-font-name" !important; }

you should now set your global custom font in this way

0
  1. Add your ttf file to assets>fonts folder.
  2. Open your app>app.scss file. and paste this code:

    @font-face {
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 300;
        src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
        unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    
    /* latin */
    @font-face {
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 300;
        src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    

    }

  3. Rename 'Raleway-Light' and 'Raleway-Regular.ttf' with your .ttf file.

  4. Run ionic serve

0

ionic 2 when compile, creates the www/build/main.css if you check the font path on app.scss usually is ../../assets, but that point's to nowhere during the build.

add on app.scss the path like ../assets/fonts/fontname.ttf and add the font on www/assets/fonts/fontname.ttf

it worked perfect for me.

0

I am working on ionic3-

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.1
    ionic (Ionic CLI) : 3.10.1

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-sim : 5.0.8 
    Node    : v8.4.0
    npm     : 5.4.0 
    OS      : OS X

I Created new css file as style.css and write these lines there-

    @font-face {
      font-family: 'sans_medium';
      src: url('../path/to/css/fonts/Regular.otf'); 
    }
   /*if need more font-face*/
    @font-face {
      font-family: 'sans_regular';
      src: url('fonts/SanFranciscoText-Regular.otf');

    }

Linked this css file with index as-

src/index.html

and added this line

<link href="css/animate.css" rel="stylesheet">

This is working for me ...

0

In ionic2 just create a folder fonts under src/assets/ then put your font file .ttf and .woff also include your sass file in it custom-fonts.scss. After your gulp serve it will automatically copy all your files under www/assets/fonts/

0

In Ionic 4 there is no app.scss any longer and styling has moved to CSS variables and the main configuration is in ./theme/variables.scss.

To use my own fonts, I put the fonts in the ./assets/fonts folder (that I created).
In ./theme/variables.scss I added:

@font-face {
  font-family: 'Muli';
  font-weight: normal;
  src: url("../assets/fonts/muli-regular.ttf");
}
@font-face {
  font-family: 'Muli';
  font-weight: 300;
  src: url("../assets/fonts/muli-light.ttf");
}

:root {
  --ion-font-family: 'Muli', 'Roboto', 'Helvetica Neue', sans-serif;
-3

Ionic 2 uses a npm module called ionic-gulp-fonts-copy. This gulp task will load the fonts present in the node_modules/ionic-angular/fonts directory. Why don't you try placing your font in that directory and try again?

(Placing your fonts in the build folder will be of no use since the build folder is removed and created each and every time you take a build of the application).

Hope this helps you. Thanks.

2
  • 1
    Placing it here: node_modules/ionic-angular/fonts solved my issue. Thank you!
    – Hamza L.
    Commented Jun 29, 2016 at 19:43
  • 1
    This is a bad idea because next time you will clone your project from git it will not work, The node_modules directory is auto generated by NPM. Commented Aug 31, 2016 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.