[CSS] import 방식으로 나눔스퀘어라운드 웹폰트 적용하기

1. 깃허브에서 폰트 파일을 다운받아 작업 폴더에 넣어준다. 

https://github.com/innks/NanumSquareRound

GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont.

 

2. 다운받은 파일 안의 nanumsquareround.css를 열어보면 아래와 같은 내용이 작성되어 있다. 

/* 나눔스퀘어라운드 웹폰트 v1.11 https://github.com/innks/NanumSquareRound */
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 300;
  src: local("NanumSquareRoundL"), /* computer */
    url("NanumSquareRoundL.eot"), /* IE9 Compat Modes */
    url("NanumSquareRoundL.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("NanumSquareRoundL.woff2") format("woff2"), /* Modern Browsers */
    url("NanumSquareRoundL.woff") format("woff"), /* Modern Browsers */
    url("NanumSquareRoundL.ttf") format("truetype"); /* Safari, Android, iOS */
}

 

3. nanumsquareround.css를 style.css안에 import한다.

@import url('./nanumsquareround.css');

 

4. @font-face의 font-family 속성을 사용하여 p 태그에 적용해준다.

@import url('nanumsquareround.css');
p { font-family: NanumSquareRound; 
    size: 80px; /* px : 절대 단위 */
    width: 100em; /* em : 상대 단위로, 실제 적용된 폰트 사이즈를 1em으로 본다. */
    letter-spacing: -0.04em; /* 자간 조정 */
    line-height: 2em;  /* 행간 조정 */
    text-indent: 3em; /* 들여쓰기 */ }