웹폰트가 모바일에서만 적용이 안되는 현상이 있네요

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

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파일로 옮겨 와도 (당연히) 모바일에서 여전히 안 되더군요.

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