[HTML, CSS, JavaScript] 웹 폰트 설정 (오프라인 O, 서버에 설치)

구글 폰트 사이트

  공식 링크(여기서 작업하면 된다) : https://google-webfonts-helper.herokuapp.com/fonts

  구글에서 폰트를 사용하면 보통 "https://fonts.google.com/"  여기에서 하는 경우가 많은데, CDN 방식이라 인터넷이 되는 환경이어야 한다. 인터넷이 되는 환경에서는 이를 쓰는 것이 가장 좋으나, 그렇지 못한 환경(오프라인)에서 폰트를 사용하고 싶을 경우 아래와 같이 사용하면 된다.

 

참고로 구글 폰트는 상업적 이용이 가능하다.

그리고 구조는 서버에 설치가 되고, 클라이언트에서는 서버의 폰트를 다운받아 화면에서 출력되는 형태이다.

 

"https://google-webfonts-helper.herokuapp.com/fonts"에 접속하게 되면 아래의 화면과 같다.

 

 

 

 

 

 

 

원하는 폰트를 검색하여 해당 페이지로 진입한다.

 

 

 

 

 

 

예전 브라우저 버전까지 하려면 "Best Support"를 눌러 진행하면 되고, 최근 브라우저만 하고자 한다면 "Modern Browsers"를 누르면 아래와 같이 css 양식이 나온다.

참고로 "no folder prefix"는 옵션으로 경로를 넣어 url에 자동으로 삽입해주는 스크립트다.

 

 

 

 

 

 

 

이제 4번의 다운로드를 눌러 압축을 풀면 .woff2, .woff 확장자 2개의 파일이 나타난다. 프로젝트에 경로에 넣고 또는 html와 같은 레벨의 위치에 넣는다 가정하고 진행해보면. 아래 그림과 같이 샘플 코드를 만들 수 있다.

<style>
 
/* black-han-sans-regular - latin_korean */
@font-face {
font-family: 'Black Han Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('black-han-sans-v8-latin_korean-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('black-han-sans-v8-latin_korean-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>
 
<span style="font-family: 'Black Han Sans', sans-serif; font-size: 25px;"> 100점, Whitekeyboard Test</span>

 

 

 

 

 

 

 

결과물

---