블로그 폰트 설정에 관하여

Posted by Readiz
2014.03.19 01:44 반응형 티스토리/Tistory


블로그 폰트 설정, 어떻게 해야 할까?



  FastBoot에만 국한된 이야기도 아니고, 티스토리 블로그에서 한 번쯤은 생각해보게 되는 폰트설정에 관한 이야기를 해보려고 합니다.



  위 글에 관심이 있으시면 한번 보셔도 좋을 것 같습니다. 블로그에 웹폰트를 적용시키는법을 다룬 포스팅들입니다. 지금 이야기 하려는 것과 밀접한 관련이 있습니다.






1. 웹에서 기본폰트를 제외한 폰트사용, 괜찮은가?

  웹에서 폰트적용을 하는 것은 매우 Critical한 문제가 있습니다. 당연한 것이지만 그 폰트가 로딩되기 전까지 폰트가 적용되지 않는다는 것이죠. 크게 두종류의 문제가 발생하는데,


a. 그냥 로딩하는 경우

  폰트 로딩 전까지 본문이 나오지 않습니다. 빈 공백으로 보이다가 폰트가 로딩이 되어서야 글이 보입니다.


b. 스크립트를 사용하여 로딩하는 경우

  약간 꼼수를 부려서 스크립트를 사용하면 로딩 전까지 기본 폰트로 대체하여 보이게 할 수 있는데, 이렇게 되면 전체적으로 글이 한번 팍! 튀는 현상이 발생합니다. 어떤 얘기냐면, 기본폰트로 보이다가 폰트 로딩이 완료된 순간 다른 글꼴로 바뀌기 때문에 방문자가 읽던 내용을 놓칠 수 있죠. 특히나 모바일에서 치명적인데, 모바일은 상대적으로 화면이 작기 때문에 로딩 완료되는 순간 위치 변동이 심해지기 때문입니다.





2. 그럼에도 불구하고 폰트설정을 하고 싶다면 어떤방법이 좋을까?

  이전에 저도 한번 블로그에 기본 폰트를 설정하려고 했었지만 왠지 모르게 방문객에게 제 글꼴 취향을 강요시키는 모양이었고, 이쁜 폰트로 해도 결국 그 느낌은 잠시라는 것을 깨닫았습니다. 당연한 이야기이지만 결국 블로그에 중요한 것은 컨텐츠이지 폰트가 이쁜 것이 블로그의 질을 향상시키지는 않더군요. 오히려 폰트 로딩시까지 불편만 주는 것이 아닌가 하는데 해결책이 있긴 있습니다. 바로 시스템에 글꼴을 깐 분들에게만 폰트가 뜨도록 하는 것인데요, 아래와 같이 폰트순서가 앞선 폰트가 출력에 우선된다는 사실을 이용하는 것입니다.


	
font-family: 나눔고딕, NanumGothic, Arial, "돋움", Dotum, AppleGothic, sans-serif; 
	


 폰트 적용의 우선순위는 앞선 폰트부터 적용되게 되어 있습니다. 즉 위와 같은 코드로 적용하면 웹페이지를 보는 사람이 나눔고딕 폰트가 깔려있다면 나눔고딕이 출력되고, 없다면 그냥 무시됩니다. 나눔고딕을 제외한 나머지 글꼴들은 시스템 글꼴들이니 없는 분들은 드물겠죠. 그래서 나눔고딕이 없으면 기본글꼴로 출력됩니다. 위처럼 CSS만을 적용한다면 폰트가 없는 경우에는 폰트를 따로 웹에서 로드하지 않으므로 1번에서 언급한 문제점들이 사라집니다. 이 방법이 제가 생각하기에는 사용자들에게 웹폰트 다운로드를 강제하지 않으면서 출력시키는 가장 이상적인 방법입니다.




3. FastBoot스킨에서 웹폰트를 적용하려면?

  이 포스팅 상단에 적어둔 글을 참고하시면 되는데, CSS에서 폰트를 어디에 적용해야 하냐는 문제가 남습니다. 다른 곳들은 다른 스킨처럼 웹폰트를 불러온 다음에 style.css의 font-family에 적용하시면 되는데 건드리면 안되는 부분이 있습니다. 예를 들면,


	
#sidebar .category .panel-body>ul>li>a:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  padding-right:5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f114";
} 
	


  이런 부분이 있는데요, FastBoot은 FontAwesome을 사용하여 아이콘을 출력하는 것이기 때문에 이런식으로 font-family가 FontAwesome으로 되어 있는 부분에는 웹폰트를 적용하시면 안됩니다. 나머지 부분에는 원하는 부분에다가 font-family부분에 웹폰트명을 넣으시면 될 것입니다. 적용이 제대로 되려면 웹폰트가 제일 앞쪽으로 들어와야한다는 것은 잊지 마세요. 웹폰트 적용에 관해서는 위에서도 링크 걸었지만 아래에 다시 걸어드립니다. 포스팅 참조하시면 나눔고딕과 구글 영문폰트에 대해 웹폰트로 적용할 수 있습니다.



이 댓글을 비밀 댓글로
  1. 늘 고민해오던 문제였는데... 좋은 팁 얻어 갑니다. ^^
  2. 폰트 패밀리를 스타일시트에서 앞에 넣어줘야 하는것도 첨 알았네요 ...앞으로는... 스타일시트 작성할때 이 부분도 신경써서 해야겠네요
    • 글에서도 설명했지만 우선순위가 적용되는거랍니다. 1번폰트가 방문자의 컴퓨터에 있으면 2번폰트는 고려조차 안된다는거죠.
  3. 저같은 경우에는 강박관념적으로 크로스 브라우저/운영체제에서 일관된 모습이 나타날것을 고려하고 있기 때문에 웹폰트의 사용은 거의 필수적으로 하고 있습니다.

    물론 한글 폰트는 용량이 어마어마 해서 안 쓰고 있지만요.

    글리피콘 같은경우에는 html 태그 바로 스타일 적용하시거나 css 셀렉터로 일괄적용하는 것도 나쁘지 않습니다.
    • esotoque님은 폰트까지 통일되어야 한다고 보시는군요.. ^^;
      그렇다면야 사용해야지요. ㅎㅎ 한글은 참 좋은글자긴 한데 늘 폰트크기가 커요. ㅎㅎ
  4. 안녕하세요^^ 좋은 스킨 공유 해주셔서 너무나 감사합니다^^ 몇일 전에 스킨을 이걸로 바꿨는데 너무나 마음에 드네요^^ 한가지 질문 드릴 것이 있습니다. 기독성을 높이기 위해 본문의 줄간격을 늘리고 양쪽정렬을 하려고 css에서 article 부분에 line-height와 text-align:justify; 를 입력 했는데 반응이 없네요 ㅎㅎ 제가 잘 못하나 봅니다;;; 혹시 방법좀 알려주실 수 있을까요? 삽입만 하면 되는 간단한 건데 반응을 안해서 여쭤 봅니다. 참고로 css 상단 부분에 있는 line-height 를 수정해 보았지만 블로그 전체적으로 적용이 되는 것 같아서 원상태로 돌려 놓았습니다.
  5. 감사합니다! 나눔고딕 적용하고 싶었는데 잘 적용되었네요^^

티스토리 툴바