Javascript 用本机移动字体而不是自定义字体加载网站的最佳方法

好的，我制作了一个响应迅速的网站，它在手机和桌面上看起来都很棒。我正在使用4种不同权重的Lato来设置我的文本样式

虽然在桌面和移动设备上加载字体（从Google WebFonts）所需的时间相对来说还可以，但在任何文本出现之前需要4-5秒的时间（FOUT IMHO的情况非常糟糕）

所以我想，在这些移动设备上，为什么不使用它们的原生字体和字体权重呢？它们看起来并不坏，而且会让我的网站看起来加载速度快得多

哪种方法最快，看起来最好

1） 使用javascript检测移动设备并应用全局规则

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

（这真的是一种糟糕的做法吗？）

2） 用于首先使用本机字体显示，延迟一段时间后，在加载时使用Lato。（注意，webfont脚本本身可能需要一些时间才能加载）

---

3） 另一种smartass方式？

我建议使用媒体查询，并对其应用最大设备宽度

这些媒体查询仅适用于具有特定宽度的设备。桌面浏览器将忽略这些样式。 您可以将“最大宽度”更改为您认为合适的任何宽度（如果您想针对平板电脑等）

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