How to import an eot font into a sass file with angular4?

Question

I am building an angular4 project, and I am trying to import a font from a .eot file. Although it is not importing and I can not use the font, but there are no errors either in the console. How do you properly import an eot font into an angular project so that it can be used to style text in that font? Here is snippet from the sass file.

@font-face
  font-family: 'ProximaNovaCnBold'
  src: url('/proxima_nova_bold-webfont.eot') format('eot')

Now the eot file is in the same folder as the sass file, but I have tried to put it in assets as well, and have not had any luck. Any help to get this working would be really great. Thanks!

https://stackoverflow.com/questions/42013369/how-to-include-fonts-in-self-contained-angular-2-component — Habeeb, Jun 22 '17 at 07:54

score 0 · Answer 1 · answered Jun 22 '17 at 09:04

this is scss function that convert and set your font

  @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
      $src: null;

      $extmods: (
              eot: "?",
              svg: "#" + str-replace($name, " ", "_")
      );

      $formats: (
              otf: "opentype",
              ttf: "truetype"
      );

      @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
      }

      @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
      }
    }

add your font like

@include font-face(proximaNovaBold, 'assets/fonts/proxima_nova_bold-webfont', eot, null, null, null);

once you add function and then you can add more then one font like that

How to import an eot font into a sass file with angular4?

1 Answers1