Vue.js Web Font(웹폰트) 적용

1. 웹폰트란?

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다.
예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다.

 

하지만 웹폰트를 사용하면, 나눔고딕 폰트 설치 유무와 상관 없이 나눔고딕 폰트가 노출됩니다.

2. 웹폰트 사용 방법

css파일 생성 후 

 

본인은 프로젝트에 variables.scss 파일로 만들어놓음

 

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareR.woff) format('woff')
}

이후 프로젝트를 컴파일 하면 폰트가 변경됩니다.

bold, light등 다양한 옵션을 지정할 수 있음

 

위 코드처럼 url()로 받아올 수도 있지만 로컬 디스크에서 가져오도록 local()로도 가져올 수 있다.

 

ㅇfont-face를 설정하는 자세한 방법들은 wit.nts-corp.com/2017/02/13/4258

웹폰트 사용하기 (웹폰트의 모든 것) | WIT블로그

 

 

* 깃허브를 보니 단순 import로도 사용 가능한 것 같다.

@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css"); // Globals
$body-font-family: "NanumSquare", sans-serif !default;
$border-radius-root: 0px;

적용

"NanumSqare"와 같이 font-family의 이름을 직접 설정할 수 있으며 반드시 원래 폰트 이름과 일치하지 않아도 되지만 유지 보수 측면에서 일치 시키는 것이 좋음

 

폰트 출처 :  github.com/moonspam/NanumSquare

moonspam/NanumSquare