본문 바로가기

TIL LIST/HTML, CSS

[SCSS] mixin을 이용한 폰트 적용 방법

@mixin font-face($name, $path, $weight: null, $style: null, $exts: otf ttf) {
    $src: null;
    $formats: (
      otf: 'opentype',
      ttf: 'truetype',
    );
    @each $ext in $exts {
      $format: map-get($formats, $ext);
      $src: append($src, url(quote($path)) format(quote($format)), comma);
    }
    @font-face {
      font-family: quote($name);
      font-style: $style;
      font-weight: $weight;
      src: $src;
    }
  }
@include font-face("Kano", "../fonts/Kano.otf", 400, null, otf);

h1 {font-family: "Kano", sans-serif;}