Best way to load website with native mobile fonts instead of custom fonts

Question

Okay so i've made this responsive website which looks great on mobile and desktop. I'm using 4 different weights of Lato to style my text.

While the time taken for loading of fonts (from Google WebFonts) is relatively okay on desktop, on mobile, it takes a good 4-5 seconds before any text appears (really bad case of FOUT IMHO).

So I thought, on these mobile devices, why not use their native fonts and font weights? They don't look very bad and will make my website appear to load much much faster.

Which approach be the fastest and look the best?

1) Detect mobile device using javascript and apply the global rule

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

(is it a really bad practice?)

2) Use Google WebFontLoader to first display using a native font and after a delay, use Lato when it loads. (note, the webfont script itself may take time to load)

3) Another smartass way?

Answer 1

I would recommend using media queries and apply max-device-width to these.

These media queries will only apply for devices with a certain width. Desktop browsers will ignore these styles. You can change the max-width to whatever width you feel nessecary(if you want to target tablets etc.)

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