import 나눔고딕 , 나눔명조 로딩 느림 1

하이브리드 앱을 수정중이다.

화면을 실행하면 이미지는 뜨는데 폰트가 한박자 늦게 따라온다.

앱쪽에서 폰트를 제어하는 줄 알고 있었는데

지금 다시보니 웹의 css에 정의되어 있더라. 음.. 맞아 그래야 하는건데 왜 그 동안은 생각하지 못했지?

무튼 속도를 높일 수 있는 방법이 있나 찾아본다. (폰트 추가없이 기본으로 쓰면 이미지랑 같이 로딩된다.)

현재는 css import방식사용 중

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

^ 이 파일을 웹 페이지에서 링크해서 사용하고 있는데 느리다면 달리 방법이 없을 것 같아요. 이 파일은 이미 다른 웹 페이지에서도 많이 사용해서 사용자의 브라우저가 캐시로 가지고 있기 때문에 매번 다운로드 하지 않는 장점이 있습니다.

* 안드로이드 웹뷰에서 사용하려고 할 때는 ttf만 된다고 한다.

nanumgothic.eot

nanumgothic.ttf

nanumgothic.woff

nanummyeongjo.eot

nanummyeongjo.ttf

nanummyeongjo.woff

파일을 images폴더에 넣고 

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

@font-face {

   font-family: 'nanumgothic';

   src: url('../images/nanumgothic.eot?') format('eot'), 

        url('../images/nanumgothic.woff') format('woff'),

        url('../images/nanumgothic.ttf')  format('truetype');}

@font-face {

   font-family: 'nanummyeongjo';

   src: url('../images/nanummyeongjo.eot?') format('eot'), 

        url('../images/nanummyeongjo.woff') format('woff'),

        url('../images/nanummyeongjo.ttf')  format('truetype');}  

이렇게 css에 추가해봤지만 여전히 느리다.

---

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

  

@font-face {

    font-family: nanumgothic; /* 사용할 폰트명*/

   src: url('../images/nanumgothic.eot'); /* eot 포맷*/

   src: local(※), url('../images/nanumgothic.woff') format('woff') /* ie9이상은 woff 포맷 적용*/

} 

  @font-face {

    font-family: nanummyeongjo; /* 사용할 폰트명*/

   src: url('../images/nanummyeongjo.eot'); /* eot 포맷*/

   src: local(※), url('../images/nanummyeongjo.woff') format('woff') /* ie9이상은 woff 포맷 적용*/

} 

여전히 느림

---

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

font-family: 'Nanum Gothic', sans-serif;

font-family: 'Nanum Myeongjo', sans-serif;

좀 빨라진 느낌이지만 느림.

---

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

@font-face{

font-family:"nanumgothic";

src:url('../images/nanumgothic.eot');

src:url('../images/nanumgothic.eot?#iefix') format('embedded-opentype'),

url('../images/nanumgothic.woff') format('woff'),

url('../images/nanumgothic.ttf') format('truetype');

src:local(※), url('../images/nanumgothic.woff') format('woff');

}

@font-face{

font-family:"nanummyeongjo";

src:url('../images/nanummyeongjo.eot');

src:url('../images/nanummyeongjo.eot?#iefix') format('embedded-opentype'),

url('../images/nanummyeongjo.woff') format('woff'),

url('../images/nanummyeongjo.ttf') format('truetype');

src:local(※), url('../images/nanummyeongjo.woff') format('woff');

}

느림  

font-family:"Nanum Gothic";   font-family:"Nanum Myeongjo"; 이렇게 해도 느림

---

@font-face{

font-family:"nanumgothic";

src:url('../images/nanumgothic.ttf');

}

@font-face{

font-family:"nanummyeongjo";

src:url('../images/nanummyeongjo.ttf');

}

느림

---

@font-face{

font-family:"nanumgothic";

src:url(''file:///android_asset/nanumgothic.ttf');

}

@font-face{

font-family:"nanummyeongjo";

src:url(''file:///android_asset/nanummyeongjo.ttf');

}

안됨. 폰트 파일은 안드쪽 assets에 넣었음.

---

나눔고딕 웹폰트 적용 소스 (크로스 브라우징 문제 해결하기)

http://as-one.tistory.com/4

1. API를 이용하지 않는 소스 (IE 계열의 브라우저에서 불규칙적으로 작동 안할때가 있음)

?

1 2 3 4 5 6 7 8 9 10 11

@font-face { font-family: "fontng"; src: url('/font/NanumGothic.eot'); src: local('?') , url('/font/NanumGothic.eot?#iefix') format('embedded-opentype') , url('/font/NanumGothic.ttf') format('truetype') , url('/font/NanumGothic.woff') format('woff'); font-weight: normal; font-style: normal;   .fng{font-family:'나눔고딕', NanumGothic, 'fontng';}

 

로컬에 나눔고딕 폰트가 설치되어 있으면 로컬 폰트를 선순위로 적용.

※ 크롬 이외의 브라우저에서는 로컬에 해당 폰트가 설치되어 있더라도 서버상의 웹폰트를 일단 로딩하기 때문에

    속도 저하를 피할 수 없다는 글을 몇번 본적 있음.(직접 테스트해본 사항은 아님)

 

2. 구글 API를 이용한 소스 ( IE 계열(6~9) 및 크롬/파이어폭스 등 모두 정상 작동 확인)

먼저 아래 구문을 CSS 파일에 import

?

1 2 3

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");   .fng{font-family:'나눔고딕', NanumGothic, 'Nanum Gothic';}

 

 

 ※ 그외 나눔 계열 나머지 폰트 적용 소스

?

1 2 3 4 5 6 7 8 9 10 11

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css"); @import url("http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css"); @import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css"); @import url("http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css"); @import url("http://fonts.googleapis.com/earlyaccess/nanumpenscript.css");   .fng{font-family:'나눔고딕', NanumGothic, 'fontng', 'Nanum Gothic';} .fnb{font-family:'Nanum Brush Script';} .fng{font-family:'Nanum Gothic Coding';} .fng{font-family:'나눔명조', NanumMyeongjo, 'fontnm', 'Nanum Myeongjo';} .fng{font-family:'나눔펜', NanumPen, 'fontnp', 'Nanum Pen Script';}

 

---

나눔고딕 구글 웹폰트(Webfont) 사용하기

http://www.letmecompile.com/%EB%82%98%EB%88%94%EA%B3%A0%EB%94%95-%EA%B5%AC%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

한글 웹사이트의 경우 브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 웹사이트 제작시 디자이너-개발자-웹사이트디자인 의뢰인 간에 폰트를 이미지화 해서 쓸 것인지 항상 말이 많다. 영어폰트같은 경우에는 용량이 작아서 부담없이 여러 폰트들을 웹폰트 형식으로 임포트해서 사용가능하지만, 한글폰트의경우 기본적으로 1M가 넘어가는 대용량이기 때문에 하나이상의 폰트를 웹사이트에 사용하는 것은 웹사이트 로딩속도에 치명적인 영향을 끼친다.

하지만 결국 검색엔진 최적화(SEO)와 유지보수 관리의 용이성 때문에 이미지화 시킨 텍스트보다는 실제 폰트를 이용하여 렌더링된 텍스트가 여러모로 장점이 많다. 워드프레스의 메뉴나 위젯등 대부분이 텍스트를 이용한 타이포그라피를 이용하여 만들어진 디자인이 많기때문에 원활한 활용을 위해 한글 웹폰트의 필요성이 더 커지고 있다.
최근에는 네이버에서 무료로 배포하는 나눔고딕 덕분에 폰트선택의 폭이 많이 늘어나서 상황이 많이 좋아진 편이며, 더군다나 구글 웹폰트에서 earlyaccess 형식이긴 하지만 한글폰트를 지원하기 시작했고, 여기에 나눔고딕이 포함되어 있어서 매우 편리하게 나눔고딕을 웹폰트로 사용할 수 있게 되었다.

일반 웹페이지에서 나눔고딕 웹폰트를 사용하기 위해서 다음과 같은 방법들이 있다.

1. CSS import 방식

CSS 파일에 다음 구문을 추가하면 된다.

1 2	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

2. 웹폰트 로더 동기방식

단순 CSS 임포트보다 더 세밀한 컨트롤을 요한다면 구글 웹폰트로더(Webfont Loader)webfont.js를 이용하면 된다.
다음 코드에서 WebFont.load에 보면 custom 항목아래 families, urls 가 직접 입력되어있다. 이는 아직 나눔고딕폰트가 정식 구글 웹폰트가아닌 early access형태로 제공되고 있기 때문에, 단순히 Nanum Gothic 폰트이름만 입력해서는 제대로 동작하지 않는다(정식 구글웹폰트의 경우는 이름만 넣어도 동작). 따라서 나눔고딕의 경우 url까지 적어줘야 제대로 작동한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script> <script type="text/javascript">   WebFont.load({       // For google fonts     google: {       families: ['Droid Sans', 'Droid Serif']     }     // For early access or custom font     custom: {         families: ['Nanum Gothic'],         urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']     }     }); </script>

3. 웹폰트 로더 비동기 로딩 방식¹

웹폰트 다운로드 완료 전까지 웹사이트 렌더링이 block되어 있는것이 답답할경우, 더빠른 로딩을 위해 비동기 방식이 사용가능하다.

하지만 비동기방식을 사용할경우 특정 브라우져에서는 웹폰트가 다운로드 완료된 후 다시 웹페이지의 텍스트들을 렌더링하면서 생기는 깜빡임 현상(전문용어로 Flash of Unstyled Text, FOUT 라고 불리는듯 싶다.)이 발생하므로 상황에따라 적절하게 사용해야한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript">   WebFontConfig = {     custom: {         families: ['Nanum Gothic'],         urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']     }   };   (function() {     var wf = document.createElement('script');     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +       '://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';     wf.type = 'text/javascript';     wf.async = 'true';     var s = document.getElementsByTagName('script')[0];     s.parentNode.insertBefore(wf, s);   })(); </script>

ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js 부분의 1.4.10 은 웹폰트로더의 버전넘버이니 필요에 따라 수정해서 사용하면 된다.

4. 실제 폰트 적용

1-3번 과정을 완료한 후에는 다음과 같이 일반 폰트 변경하듯이 손쉽게 사용가능하다.

1 2 3 4

body {     font-family: "Nanum Gothic", sans-serif; }

---

1. https://github.com/typekit/webfontloader↩

---

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

http://blog.readiz.com/67

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

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

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

---

웹 폰트 문제 해결. @font-face troubleshooting.

http://naradesign.net/wp/2012/06/19/1830/

@font-face 규칙은 CSS3에 새로 추가된 웹 글꼴 명세입니다. 표시하려고 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴을 내려받아 화면에 표시해 주는 방법인데요. 마이크로소프트가 독자적으로 IE 6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었습니다. 그러나 현실에서 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 합니다.

• IE 6~8 브라우저는 *.eot 형식의 글꼴만 지원한다. 하지만 W3C가 권장하는 형식은 *.woff 이다. IE 9 브라우저는 *.eot 형식과 *.woff 글꼴을 모두 지원한다.
• Chrome, Safari, Firefox, Opera 최신 버전 브라우저는 *.woff 형식을 지원하지만 *.eot 형식은 지원하지 않는다. 결국 모든 브라우저를 지원하기 위해 *.woff 형식과 *.eot 형식을 함께 준비해야 한다.
• 표준과 비표준 글꼴을 모두 지원하기 위해 @font-face 규칙을 두 번 사용하는 경우 IE 6~9 브라우저는 *.woff 형식과 *.eot 형식을 모두 내려받아 성능에 좋지 않은 영향을 준다.
• @media 구문 안쪽에서 @font-face 규칙을 사용하는 경우 IE 9 브라우저는 글꼴을 요청하지 않는다.

하나의 글꼴에 @font-face 규칙은 한 번만 선언

eot 형식과 woff 형식을 모두 사용해야 한다는 사실을 알고 나면 하나의 글꼴을 모든 브라우저에서 표시하기 위해 @font-face 규칙을 두 번 선언할 수 있습니다. 그러나 이런 방식은 시스템 글꼴이 없는 경우 IE 6~9 브라우저에서 eot 형식 외에 woff 형식도 요청하기 때문에 사용자는 불필요한 1MB 미만의 파일을 추가로 내려받는 샘이 됩니다.

/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}

위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}

이 코드는 추가 설명이 필요합니다.

• ng 라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조 했습니다.
• IE 6~8 브라우저는 eot 글꼴만 요청해서 화면에 표시합니다. eot 형식을 woff 형식보다 먼저 참조해야 합니다.
• IE 9 브라우저와 Chrome, Safari, Firefox, Opera 브라우저는 woff 글꼴만 요청해서 화면에 표시합니다. @font-face 명세에 따르면 eot 글꼴에 대한 format(‘embeded-opentyep’) 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야 하지만 영리하게도 내려받지 않습니다.
• local(※) 값은 외부 자원을 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어 줍니다. 그러나 이 코드에서는 IE 6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해 줍니다.
• local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것입니다. 굳이 2 byte 짜리 특수문자를 사용한 이유는 Mac OS 에서 2 byte 짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문입니다.
• format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 합니다. 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세입니다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것입니다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아닙니다.
• 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문입니다. 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋습니다.

IE 9은 @media 규칙 내부에 @font-face 허용 안함

다음과 같이 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE 9 브라우저는 외부 글꼴을 요청하지 않기 때문에 표시하지 못합니다. 아래 예제는 Paul Irish가 제안한 방탄 코드를 수정하지 않고 그냥 미디어쿼리 구문 안쪽에 넣었습니다.

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}

처음에는 이 현상이 유일하게 IE 9에만 발생하여 IE 9 버그인줄 알았는데 자세히 알고 보니 IE 9 브라우저만 CSS 2.1 명세에 잘 따른 것이었습니다. CSS 2.1 명세에 따르면 @media 규칙 내부의 또 다른 규칙인 @font-face는 유효하지 않다는 것입니다. 하지만 IE 9을 제외한 모든 브라우저는 이 명세에 따르지 않습니다. 이런 형식의 코드를 이용하면 WiFi/3G 망을 사용하는 좁은 해상도의 모바일 장치에서는 웹 글꼴을 내려받지 않아도 되기 때문에 모바일 성능 향상에 도움이 됩니다. 반응형 웹을 구현하기 위해 누구나 한 번쯤 생각할 수 있는 코드입니다.

CSS 2.1의 @media 명세를 잘 지킨 IE 9 브라우저가 오히려 웹 글꼴을 표시하지 못하는 것은 문제입니다. 이 문제는 @font-face 규칙을 미디어쿼리 밖에 선언함으로써 간단하게 해결할 수 있습니다.

/* IE 9 does not support @font-face within @media */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
@media all and (min-width:768px) {
body{font-family:나눔고딕, NanumGothic, ng}
}

참고

이 포스트와 관련된 문제를 확인하기 위해 작성했던 테스트 케이스 입니다.http://naradesign.net/css3/font-face/ IE 9 브라우저가 CSS 2.1 @media 규칙 명세를 잘 따르기는 했지만 이번에는 오히려 따르지 않는편이 더 좋을뻔 했군요.

IE 6~8 브라우저의 미디어쿼리 규칙을 지원하기 위해 respond.min.js 파일을 사용하는 동시에 미디어쿼리 구문 안쪽에 @font-face 규칙을 추가하는 경우가 있습니다. 이런 경우 IE 9 브라우저에서 개발자 도구(F12)를 이용하여 브라우저 모드와 문서 모드를 IE 8 으로 설정하면 웹 글꼴을 무한 반복 요청하다가 브라우저가 종료되는 문제가 있었습니다. 그러나 실제 IE 8 브라우저에서는 이런 증상이 재현되지 않는것을 확인 했습니다.

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2012년 6월 19일, 0:25