[CSS] 웹폰트 로딩중에도 본문 나오게 하기

폰트 로딩중에 본문이 안나오는 문제 해결하기

  블로그의 서체를 나눔고딕으로 바꾸면서, 문제가 생겼습니다. 데스크탑의 경우에는 그나마 낫지만 모바일에서 보게 되면 서체가 로딩되는 동안 글이 보이지 않는 문제가 생겼기 때문입니다. 글이 아무것도 뜨지 않는다면 그것이 잠시라도 매우 답답하게 느껴질 것입니다. 이를 한번에 해결해주는 사이트가 있어서 소개합니다.

http://fontface.kr/

  사이트 이름도 재밌는데요 (font-face는 글꼴을 지정하는 css속성입니다). 사실 어느정도 사전지식이 있는 분들은 여기까지만 설명드려도 되겠지만, 설정하는 데에 추가적인 설명을 드리겠습니다.

1. Javascript 삽입하기

	
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load( "webfont", "1" );
 google.setOnLoadCallback(function() {
  WebFont.load({ custom: {
   families: [ "NanumGothic" ],
   urls: [ "http://fontface.kr/NanumGothic/css" ]
  }});
 });
</script> 
	

 자바스크립트가 필요한 이유는 무엇일까요? 바로 글꼴 로딩중에도 본문을 볼 수 있게 하기 위함입니다. 구글 API를 이용해서 웹폰트가 로딩되는 동안에도 볼 수 있게 하는 CSS를 삽입하는 것입니다. 그 CSS는 http://fontface.kr/NanumGothic/css 를 링크하는데, 내용은 아래와 같습니다.

	
@font-face {
    font-family: 'NanumGothic';

    font-style: normal;
    font-weight: normal;
    src: local('NanumGothic'),  local('나눔고딕'),   url('http://commondatastorage.googleapis.com/fontfacekr-fonts/NanumGothic.woff') format('woff');

} 
	

바로 'NanumGothic'이라는 글꼴을 정의하는 것인데요, http://commondatastorage.googleapis.com/fontfacekr-fonts/NanumGothic.woff에 있는 웹폰트를 가져옵니다. 중요한 것은 로컬에 글꼴이 있다면 따로 로딩하지 않는다는 것입니다. 이 부분이 핵심이라고 볼 수 있겠네요. 이제 NanumGothic을 정의했으니, 쓰기만 하면 되겠죠?

2. 글꼴 적용

	
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,fieldset,img,dl,ul,ol,menu,li {
	margin:0;
	padding:0;
	border:0;
	line-height:1.5;
	font-family: "나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important;
} 
	

 위 코드는 제 블로그 CSS단에 있는 부분인데, 이 부분은 블로그 스킨마다 다를 것입니다. font-family라는 부분이 글꼴을 적용하는 부분인데, 앞에서부터 차례대로 시스템에 있는 글꼴을 적용합니다. "나눔고딕"을 1순위로 둔 이유는 로컬에 있을 때는 그대로 쓰기 위함입니다. 그다음에 없는 경우에 이제 방금 정의한 'NanumGothic'을 불러오게 됩니다. 나머지 폰트들은 다른 에러로 인해서 로딩하지 못할 경우를 대비해서 있는 것이구요. 아무튼 적용하고자 하는 글꼴을 맨 앞에다가 두는 것이 중요한 것입니다.

  나눔고딕 위와 같은 방법으로 쉽게 적용해보세요. 저는 방법을 알았으니 나눔바른고딕을 적용하는 방법을 한번 알아보아야겠습니다. 성공하면 따로 포스팅 하겠습니다.