Gmarket Sans

G마켓 브랜드 아이덴티티를 담은 서체 'Gmarket Sans'는 무료 폰트이며 아무 제약 없이 쉽게 사용할 수 있습니다.
글씨체도 깔끔하고 강조하기 좋은 글씨체다.

다운로드

Gmarket Sans 홈페이지에 들어가서 다운로드 받을 수 있다. ttf와 otf타입이 있다.

sass 적용

css로 fontface를 이용해 적용할 수도 있지만 sass를 이용해 Mixin지정 후 사용하면 코드 수도 줄이고 간편하게 사용 가능하다.

경로가 위와 같이 src/assets/fonts로 되어있으므로 아래와 같이 경로를 지정한다.

// asset 경로를 변수로 지정 
// ~@는 src 폴더를 표현
$asset-path: "~@/assets/";

아래와 같이 Mixin을 이용해 font-face를 만든다.

@mixin font-face($name, $file, $weight: noraml, $style: normal) {
  @font-face {
    font-family: "#{$name}";
    src: url("#{$asset-path}fonts/#{$file}.otf") format("otf"),
      url("#{$asset-path}fonts/#{$file}.ttf") format("truetype");
    font-weight: $weight;
    font-style: $style;
  }
}

그리고 사용할 scss파일에 아래와 같이 선언하면 된다.

// normal font weight
@include font-face('GmarketSans', 'GmarketSansMedium');
// light font weight
@include font-face('GmarketSans', 'GmarketSansLight', light);
// bold font weight
@include font-face('GmarketSans', 'GmarketSansBold', bold);