Applying own font-face

Ionic Framework ionic-v3
1

I’ve added google maven fonts to our project and changed the gulp task to be like that:

gulp.task("fonts", function () {
    return copyFonts({
        src: [
          "app/fonts/**/*.+(ttf|woff|woff2)",
          "app/fonts/**/*.+(eot|ttf|woff|woff2|svg)"
        ]
    });
});

It deploys correctly to www/fonts but I need to tell my app somehow to load this font. My app still tries to load the old font roboto…

I have a new scss named _fonts.scss which I’m reference in the app.core.scss, but still does not work

That is my _fonts.scss

$maven-font-path: $font-path !default;

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400;
  src: local("Maven Pro"), local("Maven-Pro-Regular"), url("#{$maven-font-path}/MavenPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 500;
  src: local("Maven Pro"), local("Maven-Pro-Medium"), url("#{$maven-font-path}/MavenPro-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 500;
  src: local("Maven Pro"), local("Maven-Pro-Bold"), url("#{$maven-font-path}/MavenPro-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 700;
  src: local("Maven Pro"), local("Maven-Pro-Regular-Ultra-Bold"), url("#{$maven-font-path}/MavenPro-Black.ttf") format("truetype");
}
2

You’d want to change the $font-family-md-base and $font-family-ios-base if you want to change the font that gets used.

1 Like
3

Still doesn’t work in my end. Can you provide specific steps? :tired_face:

4

Thank you ! works great