CodePen

HTML

            
              <div class="switch"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Playfair+Display|Josefin+Slab|Noticia+Text|Delius+Unicase|Oleo+Script|Quattrocento);

body {
  background:#f5f5f5;
}

div {
  font-size:8em;
  text-align:center;
  color:#222;
  text-shadow:0 0 2px #f5f5f5,0 0 4px #222;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var element = $('.switch');
var fonts = [
  'Georgia',
  'Playfair Display',
  'Helvetica',
  'Josefin Slab',
  'Noticia Text',
  'Delius Unicase',
  'Impact',
  'Oleo Script',
  'Quattrocento'
];

var interval = setInterval(next, 2500);

element.click(function() {
  clearInterval(interval);
  next();
  interval = setInterval(next, 2500);
});

var currentFont = -1;
function next() {
  currentFont = ++currentFont % fonts.length;
  element.css('font-family', fonts[currentFont]);
  element.text(fonts[currentFont]);
}
next();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................