티스토리 뷰

팁&정보

웹폰트 적용하기

.


웹폰트 적용하기



사실 웹폰트 적용하기에 관련된 포스팅은 검색만 해도 차고 넘쳐서 저까지 쓸 필요가 없을 정도지만

폰트 수정하기 포스팅을 했으니 이어서 간단히만 적어볼까 합니다



폰트를 수정했으면 ttf폰트파일이 만들어졌겠죠

웹폰트로 사용하기 위해서는 ttf 파일을 eot파일woff파일로 변환 해야합니다.



* eot파일은 마이크로소프트에서 만든 규격으로 대부분 IE8 이전버전을 위해 사용한다고 보면 됩니다

* woff파일은 모질라를 대표로 다양한 그룹이 함게 만든 포맷인데 대부분의 브라우저에서 지원됩니다.


'구형 브라우저 알게뭐야' 한다면 woff파일만으로도 충분합니다^^;





eot 파일변환


www.eotfast.com에서 제작한 파일을 사용하면 되는데

홈페이지가 팔렸는지 이상한 스팸사이트가 되었네요;


EOTFAST-1.EXE


파일만 따로 업로드 했습니다




탐색기를 열고 폰트파일을 위에 다운받은 exe파일 위로 드래그&드롭 해주면 변환된 eot파일이 생성됩니다.


위 ttf파일은 1.4M가 넘네요@_@

다행히도 변환하면 400KB대로 줄어듭니다




woff 파일변환


developer.mozilla.org/en-US/docs/Web/Guide/WOFF

모질라 가이드 사이트만 있고 다운페이지로 연결이 안되는군요


sfnt2woff.exe


역시 파일만 따로 업로드 했습니다


변환방법은 위와 같습니다

폰트파일을 위 exe파일 위로 드래그&드롭해주면 파일이 생성됩니다


위 2개의 파일을 업로드 해준뒤 스킨설정에서 css, html에 적용해주면 됩니다






우선 아래처럼 css파일을 하나 만듭니다


/*

 * 여기는 설명부분

 * 폰트이름 (Korean)

 */

@font-face {

  font-family: '폰트이름(원하는걸로)';

  font-style: normal;

  font-weight: 400;

  src: url(// "업로드된 url주소" .eot);

  src: url(// "업로드된 url주소" .eot?#iefix) format('embedded-opentype'),

       url(// "업로드된 url주소" .woff) format('woff'),

}


업로드된 파일의 url 주소는 아래처럼 스킨설정에 들어가서 해당 파일을 우클릭하면 알 수 있습니다

여러 개의 웹폰트를 하나의 css로 만들어서 사용해도 됩니다

위에 작성한 css파일도 업로드 후 URL주소를 복사합니다







<link rel="stylesheet" href="// (업로드한 css파일 url주소) .css">

스킨설정의 html의 <head> ~ </head> 사이에 위 코드를 넣어줍니다



body {font-family:'폰트이름(위에 원하는걸로 정한 이름)';}

스킨설정의 css에서 웹폰트 적용을 원하는 부분에 설정값을 넣어줍니다


위는 body 값에 넣어주었고 어느 부분에 폰트값을 넣어야 할지는 모르겠을 때에는

예전에 작성한 팁을 참고하시기 바랍니다



웹폰트를 적용하는 다양한 방법 중에 간단하다고 생각한 방법을 소개했는데

뭔가 잘 설명이 안 된 느낌이^^;


더 전문적인건 구글 검색 고고(무책임;)



특별히 수정한 파일이 아니라면 구글에서 나눔폰트를 CDN으로 제공하고있습니다.

코드만 가져다 쓰면 귀찮은 변환, 업로드 없어도 간단히 웹폰트를 적용할 수 있습니다


구글 웹폰트 보러가기



추가로 제 포스팅 소제목에 사용되고 있는

이 링크폰트(→) 이롭게 바탕체도 무료 웹폰트를 제공하고 있으니 참고하세요^^


공유하기 링크
관련글보기
, , ,
  • 프로필사진 *저녁노을* 어렵습니다
    노을인ㅎㅎ
    2018.02.22 22:05 신고
  • 프로필사진 청춘일기 더 어려운 요리를 잘 하시잖아요^^ ㅎㅎ 2018.02.23 20:34 신고
  • 프로필사진 _Chemie_ 앗 오늘은 첫 댓글 놓쳤네요ㅋㅋㅋ
    폰트 수정하는 방법은 여기저기서 많이 본 것 같기는 한데
    저는 이런것도 어려워서 그냥 기본 폰트만 사용하고 있어요ㅋㅋ
    티스토리 좋은 게 스킨을 마음대로 설정할 수 있는 거라고 알고 있기는 한데
    섣불리 도전하기에는 외계어의 장벽이 너무 높아요ㅠㅁㅠ
    2018.02.23 06:20 신고
  • 프로필사진 청춘일기 방문해주시는 것만도 감사합니다 ^^
    티스토리 최대 장점이 스킨설정의 자유죠. 그래서 각자의 개성이 묻어나는 스킨을 만들수 있다는게 좋은 것 같아요.
    외계어보다 어려운 영어를 하시는게 저는
    더 부러운데요^^ ㅎㅎ
    2018.02.23 20:38 신고
  • 프로필사진 peterjun 웹폰트 적용 관련으로 잘 보았어요.
    저도 예쁘게 하고 싶은데...기본 폰트로 쓰고 있네요. ㅎㅎ
    2018.02.24 03:06 신고
  • 프로필사진 Normal One 오.. 변환 프로그램 좋네요.ㅎㅎㅎ
    예전에 한창 폰트에 관심 많을때도 웹에 있던 폰트만 썼었어서 이런 것까진 몰랐었는데...!!

    요거 기억해둘게요 :)
    2018.02.25 21:44 신고
  • 프로필사진 보나 맥북에서는 파일이 안열리네요ㅠㅠㅠㅠ방법좀알려주세요₩ 2018.06.06 15:04 신고
  • 프로필사진 청춘일기 죄송합니다. 위 파일들은 윈OS 파일이라 맥에서는 사용할 수 없습니다.
    윈도우즈 환경에서 하는 수밖에 없을것 같습니다.
    2018.06.07 16:08 신고
댓글쓰기 폼

 팁&정보 카테고리 관련글


공지사항
최근에 달린 댓글