html, css 폰트파일 적용하기

예시 폰트 = 스포카 한 산스 네오(Spoqa Han Sans Neo)
스포카 한 산스 네오는 무료폰트다
https://spoqa.github.io/spoqa-han-sans/

index.html (index.js)

... 생략

<div className='font_wrap'>
  <p className='bold'>폰트 적용하기</p>
  <p className='semi-bold'>가나다라마바사</p>
  <p className='medium'>가나다라마바사</p>
  <p className='normal'>가나다라마바사</p>
  <p className="light">가나다라마바사</p>
  <p className="thin">가나다라마바사</p>
</div>

... 생략

css/font.css

@font-face {
    font-family : 'SpoqaHanSans';
    font-weight: 700;
    src:
        url('../font/SpoqaHanSansNeo-Bold.eot') format('embedded-opentype'),
        url('../font/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
        url('../font/SpoqaHanSansNeo-Bold.woff') format('woff'),
        url('../font/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}
.
.
.
@font-face {
    font-family : 'SpoqaHanSans';
    font-weight: 100;
    src:
    url('../font/SpoqaHanSansNeo-Thin.eot') format('embedded-opentype'),
    url('../font/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('../font/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('../font/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}

font-face 형식은 동일함

css/style.css

body {
    font-family: 'SpoqaHanSans', sans-serif;
}

font/

font 폴더안에 압축을 풀은 파일들을 넣는다.