Fonts

dabblet.css

/* Fonts */

body {
	font-size: 180%;
	color: #00aaaa;
	background: linear-gradient(45deg, #eeffaa, #aaccaa);
}

.poiret {font-family: 'Poiret One', cursive;}
.unkempt {font-family: 'Unkempt', cursive;}
.gruppo {font-family: 'Gruppo', cursive;}
.monoton {font-family: 'Monoton', cursive;}
.freckle {font-family: 'Freckle Face', cursive;}
.peralta {font-family: 'Peralta', cursive;}
.macondo {font-family: 'Macondo Swash Caps', cursive;}

dabblet.html

<p class="poiret">Hello I'm Poiret one and I'm only 400 ñáéíóú¡¿</p>
<p class="unkempt">Hello I'm Unkempt and I am 400 <strong>(and 700 also)</strong> ñáéíóú¡¿</p>
<p class="gruppo">Hello I'm Gruppo and I'm only 400 ñáéíóú¡¿</p>
<p class="monoton">Hello I'm Monoton and I'm only 400 ñáéíóú¡¿</p>
<p class="freckle">Hello I'm Freckle Face and I'm only 400 ñáéíóú¡¿</p>
<p class="peralta">Hello I'm Peralta and I'm only 400 ñáéíóú¡¿</p>
<p class="macondo">Hello I'm Macondo Swash Caps and I'm only 400 ñáéíóú¡¿</p>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Unkempt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Macondo+Swash+Caps' rel='stylesheet' type='text/css'>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}