[CSS] 폰트 파일 적용시키기 @font-face

사용자의 컴퓨터에 설치되지 않은 글꼴을 서버서에서 다운받아 사용할 수 있게 해준다.

 

폰트 파일 종류

EOT

IE에서만 통용되며 IE에서 폰트를 사용하기 위해 EOT로 변환해주는 작업이 필요하다.

 

TTF, OTF

대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식. 대부분의 브라우저에서 지원함.

 

WOFF

웹을 주된 대상으로 설계된 파일 형식, 파일 크기가 작아 신속히 다운됨. 안드로이드 지원안됨.

 

SVG

 

이렇게 종류가 많기 때문에 모든 브라우저에서 원하는 글꼴을 표기하기 위해서는 

.eot, .woff, .otf, .ttf, .svg 파일을 모두 업로드 해야한다.

 

@font-face

@font-face{
    font-family : '폰트 이름';
    src : url('파일 주소') format('폰트포맷');
    font-weight : normal;
    font-style : normal;
}

해당 글꼴을 사용할 때는

body{
	font-family : '나눔고딕', 'NanumGothic'
}

이런식으로 적용하면 된다.

 

 

현재 우리나라는 IE와 CHROME 이용 비율이 많기 때문에 eot와 woff만 올려도 충분하다는 생각이 들며,

ie 사용자도 줄고 있으므로 woff만 이용해도 되지않을까 싶다.

 

참고

https://aboooks.tistory.com/153

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)