Fonts in ionic2

Ionic Framework ionic-v3
1

I am using a couple custom fonts in ionic 2. Recently I updated my build system to match that deployed with apps under ionic@beta which pulled a lot of the stuff out of webpack and into gulp.

Previously I had a fonts folder where the eot, svg, ttf, woff, and woff2 of each font was included along with a fonts.scss folder which specified the font such as:

@font-face {
  font-family: 'Crete Round';
  src: url('creteround-webfont.eot');
  src: url('creteround-webfont.eot?#iefix') format('embedded-opentype'),
  url('creteround-webfont.woff2') format('woff2'),
  url('creteround-webfont.woff') format('woff'),
  url('creteround-webfont.ttf') format('truetype'),
  url('creteround-webfont.svg#crete_roundregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

This was included in webpack by the url loader like:
{ test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, loader: 'url-loader?limit=100000' }

With the newest build environment the url loader was removed, and no similar feature was included in gulp.

I’ve tried a few things to import them, but have ultimately had very little success. While I probably could utilize the url loader from webpack again, I’d like to maintain consistency with the direction that the ionic build process is headed.

What is the preferred method for including new fonts, and do we really need all of these font formats included? It seems that its adding a lot of bulk to the project, but I’ve never been able to get a woff by itself to work.

3 Likes