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

Posted by Readiz
2014.01.13 23:45 Creation/Design



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


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



  사이트 이름도 재밌는데요 (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'을 불러오게 됩니다. 나머지 폰트들은 다른 에러로 인해서 로딩하지 못할 경우를 대비해서 있는 것이구요. 아무튼 적용하고자 하는 글꼴을 맨 앞에다가 두는 것이 중요한 것입니다.



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

이 댓글을 비밀 댓글로
  1. 담아갈게요~
  2. 안녕하세요. 지나가다가 좋은 글 적어주셨길래 덕분에 잘 적용했습니다.
    하지만 해당 소스를 그대로 사용하게 되면 https를 사용 할 경우, 약간의 문제가 생길 수도 있습니다.
    http:// 부분을 //로만 수정해도 그런 문제가 발생하지 않을 것 같습니다.
  3. // 로 수정할 경우 로컬 테스트 시 file:// 로 시작해버려서 안될텐데요..
    • 서버로 띄워서 테스트하면 됩니다.

티스토리 툴바