블로그 폰트 설정에 관하여

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

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

2014/01/13 - [Web/Programming/Design] - [CSS] 웹폰트 로딩중에도 본문 나오게 하기

2014/02/22 - [Web/Programming/Design] - [폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기

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

---

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부분에 웹폰트명을 넣으시면 될 것입니다. 적용이 제대로 되려면 웹폰트가 제일 앞쪽으로 들어와야한다는 것은 잊지 마세요. 웹폰트 적용에 관해서는 위에서도 링크 걸었지만 아래에 다시 걸어드립니다. 포스팅 참조하시면 나눔고딕과 구글 영문폰트에 대해 웹폰트로 적용할 수 있습니다.

2014/01/13 - [Web/Programming/Design] - [CSS] 웹폰트 로딩중에도 본문 나오게 하기

2014/02/22 - [Web/Programming/Design] - [폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기