웹폰트 적용하기

 

 

 

사이트 제작 시 @font-face를 이용하여 유저의 PC에 폰트가 없어도 웹사이트에서 원하는 폰트로 화면을 보여드리는데요!

오늘은 웹폰트 적용법에 대해서 자세히 알아보도록 하겠습니다.

 

제가 아는 방법은 "구글 나눔고딕 폰트 적용하기"와 "서버에 폰트를 업로드하여 불러오기" 이 두가지 입니다.

 

먼저 "구글 나눔고딕 폰트 적용하기" 먼저 설명해 드리도록 하겠습니다.

 

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

 

구글 나눔고딕 폰트 적용하기는 매우 간편합니다. 바로 위의 소스를 스타일 시트에 넣어주시기만하면 끝!!!

워드프레스에 구글 나눔고딕 폰트를 적용하실때도 설치한 테마의 css폴더 내 style.css를 열어서 위의 소스를 넣어주시면, 워드프레스도 이쁜 나눔고딕 폰트가 적용됩니다.

 

두번째 "서버에 폰트를 업로드하여 불러오기" 는 ttf 폰트 파일을 woff,eot 파일로 변환하여 서버에 올릴 후에 로드하여 적용하는 방식입니다.

@font-face {
font-family: 'SeoulNamsanM';
font-style: normal;
src: url('폰트 업로드 주소/SeoulNamsanM.eot');
src: url('폰트 업로드 주소/SeoulNamsanM.ttf');
src: url('폰트 업로드 주소/SeoulNamsanM.woff');}

 

각 브라우저마다 읽어드리는 폰트 형식이 다르기 때문에 꼭 변환을 해주셔야 하는데, ttf를 변환하는 방법은 아래쪽에 링크해 드리도록 하겠습니다~

 

 

 

tiff,eot,woff 변환방법 보러가기