스케치북 레이아웃 사용중인데

 

xedition 레이아웃을 참조해서 웹폰트를 적용하려고 했는데...

 

세 가지 방법을 적용해 봤습니다.

 

첫번째는 xedition처럼  webfont.css 파일을 따로 만들어서 layout.html에서 불러오도록 하는 방법

두번째는 @import를 이용해서 layout.css 최상단에 웹폰트 css를 불러오도록 기재하는 방법

세번째는 layout.css 최상단에 @font-face를 직접 기재하는 방법

 

이 세가지 방법 모두 PC에서는 너무나도 잘 되는데

 

모바일에서는 두번째 방법만 적용되고 첫번째랑 세번째는 되지 않습니다.

 

원인이 도저히 짐작이 안 가네요

 

왜 두번째를 안 쓰나면, 나눔고딕 폰트의 경우 이상하게 PC에 글꼴을 설치하게 되면 font-weight 값이 bold나 700일 때 Extra Bold 서체를 불러오더군요. (웹폰트 파일을 보면 700에서는 볼드체를 불러오도록 되어 있습니다.)

 

그래서, 웹폰트를 안 쓰고 PC에 나눔글꼴을 설치할 때랑, 설치를 안 하고 웹폰트를 불러올 때 결과가 다르게 보이는 문제가 있기 때문에, 700일때 웹폰트에서도 Extra Bold 체를 불러오도록 웹폰트 css파일을 수정해야 하는데

 

그러려면 첫번째나 세번째 방법을 써야 하는데, 모바일에서는 왠지 몰라도 적용이 안 되네요. (다른 사람들 폰으로도 테스트해봤습니다.)

 

근데 웃긴게;;; 오히려 이렇게 웹폰트가 적용이 안 되는게 결과적으로는 더 낫네요. 모바일에서 웹폰트 다운받으면 데이터 문제도 있고, 왠지는 몰라도 사이트 접속할 때마다 다시 다운받는거 같더군요.(로딩할 때 보면 텍스트가 나중에 뜸)

 

사실 모바일에서 어떻게 하면 웹폰트를 안쓰게 할 수 있을까 알아보고 있었는데 전혀 예기치 못한 방향으로 해결된...;;

 

근데 왜 PC는 되는데 모바일에서만 안 되는지 원인을 모르니 좀 그렇네요

 

(폰트 관련된 부분에서 @media 구문 같은거 전혀 사용하지 않았습니다)

 

현재는 세번째 방법을 쓰고 있는데, css 최상단에 기재한 문구는 다음과 같습니다.

 

/* Open Sans */

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* NanumGothic */

@font-face{
 font-family: 'ng';
 font-style: normal;
 font-weight: 400;
 src: url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-Regular.eot);
 src: url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
      url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'),
}

@font-face{
 font-family: 'ng';
 font-style: normal;
 font-weight: 700;
 src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-ExtraBold.eot);
 src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
     url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/v3/NanumGothic-ExtraBold.woff) format('woff'),
}

 

 

그리고 스케치북 레이아웃은 body,input,textarea,select,button,table에 글꼴(font-family) 을 설정하는 부분이 css에 없고 layout.html에 style 태그를 사용해서 규정하고 있더군요. 레이아웃 설정에서 글꼴을 바꾸는 기능이 있어서 그런거 같은데... 암튼 이 부분을 다른 레이아웃처럼 css파일로 옮겨 와도 (당연히) 모바일에서 여전히 안 되더군요.

 

아무리 구글링을 해봐도 이론상으로는 안 될 이유가 전혀 없는데 모바일만 안 되니까 이상하네요.

  • profile
    모바일에서는 이상하게 웹폰트가 적용이 잘 안되더라구요. 그래서 포기;;

    그리고 웹폰트를 적용하면 글자출력 로딩이 느리게 떠서 사용자들이 별로 안좋아하시더라구요. 가능하면 모바일에서는 기본 시스템 폰트를 사용하심이...
  • profile ?

    방금 원인을 알아냈네요. 구글링 결과 안드로이드는 ttf 파일만 읽는다고 하네요... 그래서 확인해 본 결과 목록에 ttf 파일을 넣으면 불러오지만 빼면 그냥 기본 폰트로 출력하네요. ios는 기기가 없어서 확인이 안되네요

    암튼 거의 대부분의 사이트에 woff 파일이 모바일도 대응하고 ie 8을 제외한 거의 모든 모던 브라우저에 대응한다고 나와 있던데, 여기서 안드로이드는 확실하게 빼야 할 거 같네요.

    문제는, ttf파일은 용량이 커서 이걸 모바일에서 불러오면 페이지 로딩이 눈에 보일 정도로 지연되는데 다른 파일은 못 읽으니... ttf를 빼고 안드로이드 기기 지원을 제외할지, ttf를 넣고 로딩을 느리게 할지를 결정해야 하네요. 물론 반대로 안드로이드 기기에서 웹폰트 사용을 막으려면 간단하게 리스트에서 ttf 파일을 제외하면 해결.

  • ?
    구글링 결과 ios는 5.0 이상부터 woff를 지원한다고 나와 있네요. 아이폰을 쓰는 사람에게 부탁해본 결과 나눔고딕체로 정상적으로 출력된다고 하는걸 봐서 안드로이드만 못 읽는 것 같네요.
  • ? profile
    그렇군요. 근데 저 같으면 로딩을 빠르게 할 것 같아요. 모바일에서는 속도가 빠를수도 사용자들의 이탈율이 적어요.
  • profile
    웹폰트는 속도 이슈가 많아서... 서브셋 폰트를 쓰시던 CDN을 쓰시던 일단 해결책 + 웹폰트 로더 사용해서 페이지 로딩 이후 스무스하게 로딩해야 합니다. 안그러면 모바일은 이탈률이....
  • profile ?
    웹폰트 로더는 뭔가요?
  • ? profile
    http://bit.ly/1iKtXlR