Demo: Fixed Web Font padding issues on Mac/Linux/Android

dabblet.css

/*
	Demo: Fixed Web Font padding issues on Mac/Linux/Android
	Blog post: http://blog.int3ractive.com/2013/07/fixing-web-fonts-padding-issues-on-linux-mac.html
*/
@font-face {
	font-family: 'HelveticaLight'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/HelveticaNeue-Light.woff?raw=true') format('woff');	
}
@font-face {
	font-family: 'HelveticaLightFixed'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/HelveticaNeue-Light-fixed.woff?raw=true') format('woff');
}
@font-face { 
	font-family: 'Orbitron'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/Orbitron-Light.woff?raw=true') format('woff');
}
@font-face {
	font-family: 'OrbitronFixed'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/Orbitron-Light-fixed.woff?raw=true') format('woff');
}
@font-face { 
	font-family: 'Calibri'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/calibri.woff?raw=true') format('woff');
}
@font-face {
	font-family: 'CalibriFixed'; font-weight: normal; font-style: normal;
	src: local('☺'), url('https://github.com/trongthanh/trongthanh.github.com/blob/master/css/webfonts-padding-fix/calibri-fixed.woff?raw=true') format('woff');
}

.orbit { font-family: Orbitron;}
.orbit-fixed { font-family: OrbitronFixed;}
.helv { font-family: HelveticaLight;}
.helv-fixed { font-family: HelveticaLightFixed;}
.cali { font-family: Calibri;}
.cali-fixed { font-family: CalibriFixed;}

h4 { display: inline-block; text-align: center; font-weight: normal; color: #999; }
button, input, h4 { font-size: 2em; width: 250px; margin: 0.3em }
input { border: 2px solid #999; margin-bottom: 1em; }

dabblet.html

<h4>Original</h4><h4>Fixed</h4>
<br>
<button class="helv">Helvetica</button> <button class="helv-fixed">Helvetica</button>
<br>
<input class="helv" value="Helvetica"> <input class="helv-fixed" value="Helvetica">
<br>
<button class="orbit">Orbitron</button> <button class="orbit-fixed">Orbitron</button>
<br>
<input class="orbit" value="Orbitron"> <input class="orbit-fixed" value="Orbitron">
<br>
<button class="cali">Calibri</button> <button class="cali-fixed">Calibri</button>
<br>
<input class="cali" value="Calibri"> <input class="cali-fixed" value="Calibri">

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}