[SCSS] font-face mixin

Julia·2023년 5월 9일
0

폰트 개수가 증가될때마다 font-face를 선언해야하는 번거로움을 최소화 하고자
간단하게 mixin으로 만들어 사용.

style/base/_typography.scss

@mixin font-face($name, $path, $weight: null, $format: null) {
    $src: null;
    $src: append($src, url($path) format($format), comma);
    @font-face {
        font-family: $name;
        font-weight: $weight;
        src: $src;
    }
}

@include font-face('Pretendard', '../../fonts/Pretendard-Light.woff2', 200, woff2);
@include font-face('Pretendard', '../../fonts/Pretendard-Regular.woff2', 300, woff2);
@include font-face('Pretendard', '../../fonts/Pretendard-Medium.woff2', 500, woff2);
@include font-face('Pretendard', '../../fonts/Pretendard-SemiBold.woff2', 600, woff2);
@include font-face('Pretendard', '../../fonts/Pretendard-Bold.woff2', 700, woff2);
@include font-face('Pretendard', '../../fonts/Pretendard-Black.woff2', 800, woff2);

@include font-face('PP_Hatton', '../../fonts/PP_Hatton_Ultralight_200.woff', 200, woff);
@include font-face('PP_Hatton', '../../fonts/PP_Hatton_Medium_500.woff', 500, woff);
@include font-face('PP_Hatton', '../../fonts/PP_Hatton_Bold_700.woff', 700, woff);

0개의 댓글