CODEWITHSUNDEEP
angularfontssass
Ali Bari
Ali Bari

Reputation: 441

How to include custom .otf font in angular 2

I have a bunch of custom fonts I want to include in my web app. I've put them in an assets/fonts folder in src, but I'm not sure on how to actually include them in my project

I've added the following in my styles.scss which compiles but doesn't change my font:

body {
  font: Custom;
}

@font-face {
  font-family: Custom;
  src: url('assets/fonts/Custom.otf') format('opentype');
}

Upvotes: 2

Views: 5352

Answers (1)

Ali Bari
Ali Bari

Reputation: 441

Found the sol'n.

Custom needed to be in quotes and !important for override of current font

body {
  font-family: 'Custom', Fallback, sans-serif !important;
}

@font-face {
  font-family: 'Custom';
  src: url('assets/fonts/Custom.otf') format('opentype');
}

Upvotes: 5

Related Questions