폰트 개수가 증가될때마다 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);