맞춤 글꼴 대신 기본 모바일 글꼴로 웹 사이트를로드하는 가장 좋은 방법

Question

좋아요. 그래야 모바일 및 데스크톱에서 멋지게 보이는이 반응 형 웹 사이트를 만들었습니다. Lato의 4 가지 다른 가중치를 사용하여 내 텍스트의 스타일을 지정합니다.

Google WebFonts에서 글꼴을로드하는 데 걸리는 시간이 데스크톱에서는 비교적 좋지만 텍스트가 표시되기까지는 4-5 초가 걸립니다 (FOUT IMHO의 경우는 좋지 않음).

그래서이 모바일 장치에서 기본 글꼴과 글꼴 가중치를 사용하지 않는 이유는 무엇입니까? 그들은 아주 나쁘게 보이지 않으며 나의 웹 사이트가 매우 빨리 로딩되는 것처럼 보일 것입니다.

어떤 접근 방식이 가장 빠르며 가장 좋게 보입니까?

1) 글로벌 규칙

.mobile-detected *{ 
     font-family:'Roboto', 'Helvetica', 'Arial', sans-serif !important ; 
    } 

(이것은 정말 나쁜 관행인가?)

2) 기본 글꼴을 사용하여 첫 번째 디스플레이로 Google WebFontLoader 사용을 자바 스크립트를 사용하여 모바일 장치를 검색 및 적용과 후 지연되면 Lato를 사용하십시오. (참고로 webfont 스크립트 자체가로드되는 데 시간이 걸릴 수 있습니다.)

3) 또 다른 방법은 무엇입니까?

Answer 1

미디어 쿼리를 사용하고 max-device-width를 적용하는 것이 좋습니다.

이러한 미디어 쿼리는 특정 너비가있는 장치에만 적용됩니다. 데스크톱 브라우저는 이러한 스타일을 무시합니다. 최대 너비를 네가 느낄 수있는 너비로 변경할 수 있습니다 (타블렛을 타겟팅하려는 경우 등)

@media only screen 
and (max-device-width : 767px) { 
    body *{ 
    font-family:'Roboto', 'Helvetica', 'Arial', sans-serif !important ; 
    } 
}