[CSS] 웹 폰트 사용하기

아는 형이 이번에 발표하는 작품을 웹으로 공개한다고 한다.  그런데 개발 중 문제가 있어 잠깐 미팅을 가졌는데, 프로토타입을 워드로 작업하고 html로 출력하는 방식으로 했는데 이게 웹에 올리니 폰트가 깨진다고...

 

그래서 형이 사용하는 폰트의 웹 버전이 있는지 찾아보았고 다행히 있었다.

형에게 웹 폰트 추가 방법을 알려주면서 이런 정보도 누군가한테는 꼭 필요하다고 생각이 들었고

그래서 웹 폰트를 추가하는 방법을 간단히 정리해본다.

 

1. style sheet 또는 <style></style> 태그 안에 웹 폰트 설정 구문 추가

<style>

@font-face { font-family: 'EBSHunminjeongeumSBA'; 
             src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHunminjeongeum.woff') format('woff'); 
             font-weight: normal; 
             font-style: normal; 
             }

</style>

 

2. 폰트 적용을 원하는 곳에 font-family를 적용한다. font-family 이름은 @font-face에서 불러올때 설정한 font-family 이름을 이용한다.

(만약 저게 너무 길어서 바꾸고싶으면 바꿀 수 있지만, 협업 시에는 가능하면 무슨 폰트를 썼는지 바로 알 수 있게 그냥 두는 것이 좋을 것 같다고 생각한다.)

<style>

@font-face { font-family: 'EBSHunminjeongeumSBA'; 
             src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHunminjeongeum.woff') format('woff'); 
             font-weight: normal; 
             font-style: normal; 
             }

h1 {
	font-family:'EBSHunminjeongeumSBA';
	font-weight: normal;
    }

</style>

 

3. 다른 폰트도 동일한 방식으로 추가해서 사용이 가능하다.

See the Pen 웹 폰트 사용법 by mommocmoc (@mommocmoc) on CodePen.