JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a1">This Is Line One</div>
<div id="a2">this is line two</div>
<div id="a3">THIS IS LINE THREE</div>
<div id="a4">this is line four</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Orbitron:700);
@import url(http://fonts.googleapis.com/css?family=Lobster:400);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower:400);
@import url(http://fonts.googleapis.com/css?family=Oswald:400);
div{font-family:'Segoe UI Light';font-size:3em;}

JavaScript

/*
I cannot NATURALLY reproduce the delay on my site. Probably my servers are located in Botswana. 

Anyway, I get a delay after which the font abruptly changes, so I attempted to replicate the effect via the below javascript.
*/

setTimeout(function(){
    $('div').css('font-family','Orbitron');
},2000);