refactored the snapshot generation code.

.gitignore

@@ -39,6 +39,7 @@ ref/
 pages/
 releases/
 release-archives/
+snapshot/assets/
 
 # Generated scripts
 .buildglyphs.all.patel

makefile

@@ -10,6 +10,7 @@ LOOPS = 0 1 2
 svgs : svgs-default svgs-slab
 fonts : fonts-default fonts-slab
 test  : test-default test-slab
+snapshot  : snapshot-default snapshot-slab
 
 # svgs
 svgs-default : $(SCRIPTS) | $(OBJDIR) dist
@@ -32,6 +33,12 @@ test-default : fonts-default
 	@$(MAKE) -f onegroup.mk test $(PARAM_DEFAULT)
 test-slab : fonts-slab
 	@$(MAKE) -f onegroup.mk test $(PARAM_SLAB)
+	
+# snapshot
+snapshot-default : webfonts-default | snapshot/assets
+	@$(MAKE) -f onegroup.mk snapshot $(PARAM_DEFAULT)
+snapshot-slab : webfonts-slab | snapshot/assets
+	@$(MAKE) -f onegroup.mk snapshot $(PARAM_SLAB)
 
 # Webfonts
 dist/webfonts : | dist
@@ -85,53 +92,22 @@ fw : fonts-fw fonts-cc
 
 webfonts : webfonts-default webfonts-slab
 
-images/weights.png : fonts-default fonts-slab
+electronsnaps1: webfonts snapshot
-	convert -size 4800x1700 xc:white -pointsize 125 \
+	cd snapshot && electron getsnap.js --dir ../images
-		-fill black \
-		-font dist/iosevka/iosevka-thin.ttf       -draw "text 0,121  '      thin    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-extralight.ttf -draw "text 0,299  'extralight    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-light.ttf      -draw "text 0,478  '     light    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-regular.ttf    -draw "text 0,656  '   regular    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-medium.ttf     -draw "text 0,835  '    medium    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-bold.ttf       -draw "text 0,1013 '      bold    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-font dist/iosevka/iosevka-heavy.ttf      -draw "text 0,1192 '     heavy    float Fox.quick(h){ is_brown && it_jumps_over(doges.lazy) }'" \
-		-trim images/weights.png
-	optipng images/weights.png
-
-images/variants.png : fonts-default fonts-slab fonts-hooky fonts-zshaped
-	convert -size 6800x1700 xc:white -pointsize 125 \
-		-fill black \
-		-font dist/iosevka/iosevka-italic.ttf          -draw "text 0,121  'default:    '" \
-		-font dist/iosevka/iosevka-regular.ttf         -draw "fill blue text 750,121 'set ' fill black text 1000,121 'font.name.uniqueSubFamily ' fill green text 2625,121 '\"\\(para.family) \\(para.style) \\(para.version) (\\(para.codename))\"'" \
-		-font dist/variant-hooky-iosevka/hooky-iosevka-italic.ttf    -draw "text 0,308  '  hooky:    '" \
-		-font dist/variant-hooky-iosevka/hooky-iosevka-regular.ttf   -draw "fill blue text 750,308 'set ' fill black text 1000,308 'font.name.uniqueSubFamily ' fill green text 2625,308 '\"\\(para.family) \\(para.style) \\(para.version) (\\(para.codename))\"'" \
-		-font dist/variant-zshaped-iosevka/zshaped-iosevka-italic.ttf  -draw "text 0,496  'zshaped:    '" \
-		-font dist/variant-zshaped-iosevka/zshaped-iosevka-regular.ttf -draw "fill blue text 750,496 'set ' fill black text 1000,496 'font.name.uniqueSubFamily ' fill green text 2625,496 '\"\\(para.family) \\(para.style) \\(para.version) (\\(para.codename))\"'" \
-		-trim images/variants.png
-	optipng images/variants.png
-
-electronsnaps1: pages
-	cd pages && electron getsnap.js --dir ../images
 images/opentype.png: electronsnaps1
 	optipng $@
 images/languages.png: electronsnaps1
 	optipng $@
-images/languages-slab.png: electronsnaps1
+images/preview-all.png: electronsnaps1
 	optipng $@
-images/languages-light.png: electronsnaps1
+images/weights.png: electronsnaps1
 	optipng $@
-images/languages-slab-light.png: electronsnaps1
+images/variants.png: electronsnaps1
 	optipng $@
-images/preview.png: electronsnaps1
+images/matrix.png: electronsnaps1
 	optipng $@
-images/preview-slab.png: electronsnaps1
+images/family.png: electronsnaps1
-	optipng $@
-images/preview-light.png: electronsnaps1
-	optipng $@
-images/preview-slab-light.png: electronsnaps1
-	optipng $@
-images/preview-all.png: images/preview.png images/preview-light.png images/preview-slab.png images/preview-slab-light.png
-	convert $^ -append $@
 	optipng $@
 
-sampleimages: images/weights.png images/variants.png images/opentype.png images/languages.png images/languages-slab.png images/languages-light.png images/languages-slab-light.png images/preview.png images/preview-slab.png images/preview-light.png images/preview-slab-light.png images/preview-all.png
+
+sampleimages: images/family.png images/matrix.png images/weights.png images/variants.png images/opentype.png images/languages.png images/preview-all.png

makesupport.mk

@@ -4,6 +4,8 @@ $(OBJDIR) :
 	@- mkdir $@
 dist :
 	@- mkdir $@
+snapshot/assets :
+	@- mkdir $@
 	
 PATELC = node ./node_modules/patel/bin/patel-c
 SUPPORT_FILES_FROM_PTL = support/glyph.js support/spiroexpand.js support/spirokit.js parameters.js support/anchor.js support/point.js support/transform.js

onegroup.mk

@@ -168,6 +168,11 @@ archives : $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip $(ARCHIVEDIR)/
 pages : $(PAGESTTF) $(PAGESWOFF) $(PAGESWOFF2) $(PAGESMAPS)
 webfonts : $(WEBFONTSTTF) $(WEBFONTSWOFF) $(WEBFONTSWOFF2) $(WEBFONTCSS)
 
+SNAPSHOT_ASSETS = $(subst dist/webfonts/,snapshot/,$(WEBFONTSTTF) $(WEBFONTSWOFF) $(WEBFONTSWOFF2) $(WEBFONTCSS))
+$(SNAPSHOT_ASSETS) : snapshot/% : dist/webfonts/%
+	cp $< $@
+snapshot: $(SNAPSHOT_ASSETS)
+
 # testdrive
 TESTDIR = testdrive/assets
 TESTTTF = $(subst $(DISTDIR)/,$(TESTDIR)/,$(DISTTARGETS))

snapshot/getsnap.js

@@ -0,0 +1,87 @@
+var app = require('app');
+var BrowserWindow = require('browser-window');
+var argv = require('yargs').argv;
+var fs = require('fs');
+var cp = require('child_process');
+
+var mainWindow = null;
+var allWindowClosed = false;
+var pendingTasks = 0;
+var zoom = 2
+
+function checkQuit(){
+	if(allWindowClosed && pendingTasks == 0) app.quit();
+}
+
+app.on('window-all-closed', function() {
+	allWindowClosed = true;
+	checkQuit()
+});
+
+function combineImages(images, outfile, width, height, background, padding){
+	var command = 'convert ' + images.join(' ') + ' -append -crop ' + width + 'x' + height + '+0+0 +repage -bordercolor rgb(52,52,53) -trim  ' + outfile;
+	console.log(command);
+	cp.exec(command, function(err, stdout, stderr){
+		images.forEach(function(file){
+			fs.unlinkSync(file);
+		});
+		pendingTasks -= 1;
+		checkQuit();
+	})
+};
+
+var ipc = require('electron').ipcMain;
+function GOTO(phase){ currentPhase = phase };
+var phases = {
+	prepare : function(event, arg){
+		console.log(arg);
+		GOTO(phases['receive-rect']);
+	},
+	'receive-rect' : function(event, rect){
+		pendingTasks += 1
+		rect = JSON.parse(JSON.stringify(rect));
+		var file = argv.dir + '/' + rect.name + '.png';
+		var j = 0;
+		var totalFiles = Math.ceil(rect.height / rect.windowHeight);
+		var pendingFiles = totalFiles;
+		function doneFileWrite(){
+			pendingFiles -= 1;
+			if(pendingFiles <= 0) {
+				var images = [];
+				for(var k = 0; k < j; k++){
+					images.push(argv.dir + '/' + rect.name + '.' + k + '.png')
+				}
+				combineImages(images, file, rect.windowWidth * rect.dpi, rect.height * rect.dpi, rect.background, rect.padding);
+			}
+		}
+		function step(){
+			event.sender.send('scroll', rect.y + j * rect.windowHeight);
+			GOTO(function(event){
+				mainWindow.capturePage(function(image){
+					fs.writeFile(argv.dir + '/' + rect.name + '.' + j + '.png', image.toPng(), doneFileWrite);
+					j += 1;
+					if(j >= totalFiles) { // Move to next image
+						event.sender.send('complete', file);
+						GOTO(phases['receive-rect']);
+					} else {
+						step()
+					}
+				})
+			})
+		};
+		step()
+	}
+};
+var currentPhase = phases['prepare'];
+ipc.on('snapshot', function(){
+	currentPhase.apply(this, arguments)
+});
+ipc.on('log', function(event, arg){
+	console.log(arg);
+})
+
+app.on('ready', function() {
+	mainWindow = new BrowserWindow({width: 64 * 16 * zoom, height: 1024 * zoom, x: 5000, y: 5000, zoomFactor: zoom});
+	mainWindow.loadURL('file://' + __dirname + '/index.html');
+	//mainWindow.hide();
+});

snapshot/index.html

@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+	@import url(iosevka.css);
+	@import url(iosevka-slab.css);
+	
+.thin       { font-weight: 100 }
+.extralight { font-weight: 200 }
+.light      { font-weight: 300 }
+.medium     { font-weight: 500 }
+.bold       { font-weight: 700 }
+.extrabold  { font-weight: 800 }
+.heavy      { font-weight: 900 }
+.italic     { font-style: italic }
+.oblique    { font-style: oblique }
+.slab { font-family: "Iosevka Slab", monospace }
+
+body {
+	font-family: "Iosevka";
+	background: #343435;
+	padding-bottom: 60em;
+	font-size: 15px;
+}
+pre, code { font-family: "Iosevka"; }
+
+::-webkit-scrollbar {display: none;}
+
+body > section {
+	margin: 3em auto;
+	max-width: 900px;
+	background: white;
+}
+
+/* hljs */
+section.preview {
+	max-width: none;
+	text-align: center;
+	font-size: 80%;
+}
+section.preview pre {
+	display: inline-block;
+	text-align: left;
+	margin: 1.5em 0;
+	line-height: 1.5;
+}
+section.color-light {
+	background-color: hsl(39, 6%, 95%);
+	color: #333;
+}
+.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title {
+  color: #446fbd;
+}
+.color-light .comment {
+  color: hsl(0, 0%, 62%);
+}
+.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in {
+  color: #8757ad;
+}
+.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value {
+  color: #e88501;
+}
+.color-light .number, .color-light .xml .attribute {
+  color: #6d8600;
+}
+.color-light .operator {
+	color: #c33500;
+}
+section.color-dark {
+	background-color: hsl(39, 6%, 12%);
+	color: #cfcfcf;
+}
+.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title {
+	color: #6c9ef8;
+}
+.color-dark .comment {
+	color: #767676;
+}
+.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in {
+	color: #b77fdb;
+}
+.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value {
+	color: #D89333;
+}
+.color-dark .number, .color-dark .xml .attribute {
+	color: #85a300;
+}
+.color-dark .operator {
+	color: #c34564;
+}
+
+section#matrix {
+	height: 480px;
+	position: relative;
+}
+section#matrix > div {
+	position: absolute;
+	font-size: 90px;
+	left: 50%;
+	margin-left: -3.75em;
+	top: 50%;
+	margin-top: -1.95em;
+}
+section#matrix > div.slab {
+	margin-left: -3.25em;
+	margin-top: -1.44em;
+}
+section#matrix > div > row {
+	display: block;
+	text-align: center;
+	line-height: 0.8em;
+}
+
+section#matrix > div > row > span {
+	font-size: 0.4em;
+	padding: 0 0.5em
+}
+
+section#opentype {
+	max-width: 36rem;
+}
+section#opentype > h2 {
+	display: none;
+}
+section#opentype > div.hr {
+	font-size: 80%;
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	margin: 3rem auto;
+	text-align: center;
+	display: block;
+}
+section#opentype > div.hr:before, section#opentype > div.hr:after {
+	content: '';
+	display: inline-block;
+	border-bottom: 1px solid #ddd;
+	width: 4em;
+	margin: 0 1em;
+	vertical-align: 0.3em;
+}
+section#opentype > div {
+	display: flex;
+	margin-bottom: 1em;
+	align-items: center;
+}
+section#opentype > div > span {
+	display: block;
+	line-height: 1.5em;
+	height: 4.5em;
+	padding: 0.25em;
+	border: 1px solid transparent;
+}
+section#opentype span.normal-example {
+	padding: 0.25em;
+	text-align: right;
+	width: 5rem;
+}
+section#opentype span.arrow {
+	line-height: 4.5em;
+	margin: 0 0.5rem 0 0.25em;
+}
+section#opentype span.feature-example {
+	border-color: #ccc;
+	border-radius: 0.25rem;
+	margin-right: 0.5rem;
+	padding: 0.25em 0.5em;
+	width: 5em;
+}
+
+section#opentype span.lhs {
+	display: block;
+	font-size: 75%;
+	border-bottom: 1px solid #ddd;
+}
+
+section#opentype span.rhs.sub {
+	color: #989898;
+}
+section#opentype span.rhs.sub b {
+	font-weight: normal;
+	color: black;
+}
+
+#family {
+	background: white;
+	font-size: 0.9em
+}
+#picker:hover .menu{
+	display: block;
+}
+#family .group {
+	display: flex;
+}
+#family .group a {
+	display: block;
+	padding: 0.5rem;
+	flex: 1;
+	text-shadow: none;
+	color: black;
+	text-decoration: none;
+}
+#family .group a.italic, #family .group a.oblique {
+	flex: 1.3
+}
+#family .group a.slab {
+	flex: 1.2
+}
+#family .group a.slab.italic, #family .group a.slab.oblique {
+	flex: 1.7
+}
+
+</style>
+<body>
+<section id="family" class="menu">
+	<div class="group">
+		<a href="#" class="pp thin ">Thin</a><a href="#" class="pp slab thin ">Slab Thin</a><a href="#" class="pp thin italic ">Thin Italic</a><a href="#" class="pp slab thin italic ">Slab Thin Italic</a><a href="#" class="pp thin oblique ">Thin Oblique</a><a href="#" class="pp slab thin oblique ">Slab Thin Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp extralight ">Extralight</a><a href="#" class="pp slab extralight ">Slab Extralight</a><a href="#" class="pp extralight italic ">Extralight Italic</a><a href="#" class="pp slab extralight italic ">Slab Extralight Italic</a><a href="#" class="pp extralight oblique ">Extralight Oblique</a><a href="#" class="pp slab extralight oblique ">Slab Extralight Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp light ">Light</a><a href="#" class="pp slab light ">Slab Light</a><a href="#" class="pp light italic ">Light Italic</a><a href="#" class="pp slab light italic ">Slab Light Italic</a><a href="#" class="pp light oblique ">Light Oblique</a><a href="#" class="pp slab light oblique ">Slab Light Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp  active">Regular</a><a href="#" class="pp slab ">Slab</a><a href="#" class="pp italic ">Italic</a><a href="#" class="pp slab italic ">Slab Italic</a><a href="#" class="pp oblique ">Oblique</a><a href="#" class="pp slab oblique ">Slab Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp medium ">Medium</a><a href="#" class="pp slab medium ">Slab Medium</a><a href="#" class="pp medium italic ">Medium Italic</a><a href="#" class="pp slab medium italic ">Slab Medium Italic</a><a href="#" class="pp medium oblique ">Medium Oblique</a><a href="#" class="pp slab medium oblique ">Slab Medium Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp bold ">Bold</a><a href="#" class="pp slab bold ">Slab Bold</a><a href="#" class="pp bold italic ">Bold Italic</a><a href="#" class="pp slab bold italic ">Slab Bold Italic</a><a href="#" class="pp bold oblique ">Bold Oblique</a><a href="#" class="pp slab bold oblique ">Slab Bold Oblique</a>
+	</div><div class="group">
+		<a href="#" class="pp heavy ">Heavy</a><a href="#" class="pp slab heavy ">Slab Heavy</a><a href="#" class="pp heavy italic ">Heavy Italic</a><a href="#" class="pp slab heavy italic ">Slab Heavy Italic</a><a href="#" class="pp heavy oblique ">Heavy Oblique</a><a href="#" class="pp slab heavy oblique ">Slab Heavy Oblique</a>
+	</div>
+</section>
+<section id="opentype">
+	<h2>Opentype features</h2>
+	<div class="hr">Stylistic sets</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">ss01</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss01'; font-feature-settings:'ss01'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span><span class="feature-example"><span class="lhs">ss02</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss02'; font-feature-settings:'ss02'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span><span class="feature-example"><span class="lhs">ss03</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss03'; font-feature-settings:'ss03'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">ss04</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss04'; font-feature-settings:'ss04'">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span><span class="feature-example"><span class="lhs">ss05</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss05'; font-feature-settings:'ss05'">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">msk &amp; <b>0</b>xFF<br><i>msk &amp; <b>0</b>xFF</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">ss06</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss06'; font-feature-settings:'ss06'">msk &amp; <b>0</b>xFF<br><i>msk &amp; <b>0</b>xFF</i></span></span><span class="feature-example"><span class="lhs">ss07</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss07'; font-feature-settings:'ss07'">msk &amp; <b>0</b>xFF<br><i>msk &amp; <b>0</b>xFF</i></span></span><span class="feature-example"><span class="lhs">ss08</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss08'; font-feature-settings:'ss08'">msk &amp; <b>0</b>xFF<br><i>msk &amp; <b>0</b>xFF</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">ss09</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss09'; font-feature-settings:'ss09'"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span><span class="feature-example"><span class="lhs">ss10</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss10'; font-feature-settings:'ss10'"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span>
+	</div>
+	<div class="hr">Character Variants</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv01</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv01'; font-feature-settings:'cv01'">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span><span class="feature-example"><span class="lhs">cv02</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv02'; font-feature-settings:'cv02'">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv03</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv03'; font-feature-settings:'cv03'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv04</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv04'; font-feature-settings:'cv04'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv05</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv05'; font-feature-settings:'cv05'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv06</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv06'; font-feature-settings:'cv06'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>l</b>ong<br><i><b>l</b>ong</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv07</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv07'; font-feature-settings:'cv07'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv08</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv08'; font-feature-settings:'cv08'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv09</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv09'; font-feature-settings:'cv09'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv10</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv10'; font-feature-settings:'cv10'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>g</b>it<br><i><b>g</b>it</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv11</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv11'; font-feature-settings:'cv11'"><b>g</b>it<br><i><b>g</b>it</i></span></span><span class="feature-example"><span class="lhs">cv12</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv12'; font-feature-settings:'cv12'"><b>g</b>it<br><i><b>g</b>it</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv13</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv13'; font-feature-settings:'cv13'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span><span class="feature-example"><span class="lhs">cv14</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv14'; font-feature-settings:'cv14'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span><span class="feature-example"><span class="lhs">cv15</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv15'; font-feature-settings:'cv15'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv16</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv16'; font-feature-settings:'cv16'"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span><span class="feature-example"><span class="lhs">cv17</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv17'; font-feature-settings:'cv17'"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>*</b>handler<br><i><b>*</b>handler</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv18</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv18'; font-feature-settings:'cv18'"><b>*</b>handler<br><i><b>*</b>handler</i></span></span><span class="feature-example"><span class="lhs">cv19</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv19'; font-feature-settings:'cv19'"><b>*</b>handler<br><i><b>*</b>handler</i></span></span>
+	</div>
+	<div>
+			<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span>
+			<span class="arrow icon-arrow-right-circle"></span>
+			<span class="feature-example"><span class="lhs">cv20</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv20'; font-feature-settings:'cv20'">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span><span class="feature-example"><span class="lhs">cv21</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv21'; font-feature-settings:'cv21'">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span>
+	</div>
+</section>
+<section id="matrix">
+	<div>
+		<row><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+		<row class="italic"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+		<row class="oblique"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+	</div>
+	<div class="slab">
+		<row><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+		<row class="italic"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+		<row class="oblique"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
+	</div>
+</section>
+<section id="previews">
+<section class="preview color-dark"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+    <span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+    <span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+    ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-light"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+    <span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+    <span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+    ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-dark slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+    <span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+    <span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+    ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-light slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+    <span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+    <span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+    ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+</section>
+
+<section id="languages"><section class="preview color-dark" style="-webkit-font-feature-settings:'locl'"><pre><code class="javascript hljs"><span class=keyword>var</span> languages <span class="operator">=</span> [
+        {lang: <span class=string>'English'</span>,       sample: <span class=string>'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
+        {lang: <span class=string>'IPA'</span>,           sample: <span class=string>'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
+        {lang: <span class=string>'Bulgarian'</span>,     sample: <span class=string>'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'</span>},
+        {lang: <span class=string>'Czech'</span>,         sample: <span class=string>'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'</span>},
+        {lang: <span class=string>'Finnish'</span>,       sample: <span class=string>'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'</span>},
+        {lang: <span class=string>'French'</span>,        sample: <span class=string>'Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi.'</span>},
+        {lang: <span class=string>'German'</span>,        sample: <span class=string>'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'</span>},
+        {lang: <span class=string>'Greek'</span>,         sample: <span class=string>'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'</span>},
+        {lang: <span class=string>'Ancient Greek'</span>, sample: <span class=string>'Ἄδμηθ’, ὁρᾷς γὰρ τἀμὰ πράγμαθ’ ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '</span>},
+        {lang: <span class=string>'Hungarian'</span>,     sample: <span class=string>'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'</span>},
+        {lang: <span class=string>'Icelandic'</span>,     sample: <span class=string>'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'</span>},
+        {lang: <span class=string>'Irish'</span>,         sample: <span class=string>'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'</span>},
+        {lang: <span class=string>'Latvian'</span>,       sample: <span class=string>'Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku.'</span>},
+        {lang: <span class=string>'Lithuanian'</span>,    sample: <span class=string>'Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą.'</span>},
+        {lang: <span class=string>'Macedonian'</span>,    sample: <span class=string>'Ѕидарски пејзаж: шугав билмез со чудење џвака ќофте и кељ на туѓ цех.'</span>},
+        {lang: <span class=string>'Norwegian'</span>,     sample: <span class=string>'Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz'</span>},
+        {lang: <span class=string>'Polish'</span>,        sample: <span class=string>'Pchnąć w tę łódź jeża lub ośm skrzyń fig.'</span>},
+        {lang: <span class=string>'Portuguese'</span>,    sample: <span class=string>'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'</span>},
+        {lang: <span class=string>'Romanian'</span>,      sample: <span class=string>'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'</span>},
+        {lang: <span class=string>'Russian'</span>,       sample: <span class=string>'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'</span>},
+        {lang: <span class=string>'Serbian'</span>,       sample: <span class=string lang=sr>'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'</span>},
+        {lang: <span class=string>'Spanish'</span>,       sample: <span class=string>'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'</span>},
+        {lang: <span class=string>'Turkish'</span>,       sample: <span class=string>'Pijamalı hasta yağız şoföre çabucak güvendi.'</span>},
+        {lang: <span class=string>'Ukrainian'</span>,     sample: <span class=string>'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'</span>}
+]
+</code></pre></section></section>
+
+<section id="variants"><section class="preview color-light" style="background:white;font-size:1em"><pre>
+<i>default</i>        <span><span class="keyword">set</span> font.name.uniqueSubFamily     <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
+<i>hooky  </i>        <span style="-webkit-font-feature-settings:'ss01'"><span class="keyword">set</span> font.name.uniqueSubFamily     <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
+<i>zshaped</i>        <span style="-webkit-font-feature-settings:'ss02'"><span class="keyword">set</span> font.name.uniqueSubFamily     <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
+</pre></section></section>
+
+<section id="weights"><section class="preview color-light" style="background:white;font-size:1.75em"><pre>
+<span class="thin"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="extralight"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="light"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="regular"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="medium"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="bold"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+<span class="heavy"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
+</pre></section></section>
+
+<script>
+if(window && window.process && window.process.type && process.versions['electron']) (function(){
+	console.log('I AN IN ELECTRON');
+	var windowWidth = window.innerWidth;
+	var windowHeight = window.innerHeight;
+	var dpi = window.devicePixelRatio;
+	var ipc = require('electron').ipcRenderer;
+	
+	var onScroll = function(){};
+	ipc.on('scroll', function(){
+		onScroll.apply(this, arguments);
+		setTimeout(function(){ ipc.send('snapshot', 'scroll-done') }, 100);
+	});
+	var onComplete = function(){};
+	ipc.on('complete', function(){ onComplete.apply(this, arguments) });
+	
+	function captureElement(options, callback){
+		window.scroll(0, 0);
+		var rect = options.el.getBoundingClientRect();
+		ipc.send('snapshot', {
+			name: options.name,
+			windowWidth: windowWidth,
+			windowHeight: windowHeight,
+			background: options.background || 'white',
+			padding: options.padding || 1,
+			dpi: dpi,
+			x: rect.left | 0,
+			y: rect.top | 0,
+			width: rect.width | 0,
+			height: rect.height | 0
+		});
+		onScroll = function(event, arg){
+			window.scrollTo(0, arg)
+		};
+		onComplete = function(){
+			if(callback) callback();
+			onComplete = function(){};
+		}
+	}
+	
+	var snapshotTasks = [
+		{
+			el: document.querySelector('#languages'),
+			name: 'languages',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#variants'),
+			name: 'variants',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#opentype'),
+			name: 'opentype',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#matrix'),
+			name: 'matrix',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#family'),
+			name: 'family',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#previews'),
+			name: 'preview-all',
+			background: 'white',
+			padding: 0
+		},
+		{
+			el: document.querySelector('#weights'),
+			name: 'weights',
+			background: 'white',
+			padding: 0
+		}
+	]
+	
+	window.onload = function(){
+		ipc.send('snapshot', 'i am ready');
+		console.log('I AM READY');
+		current = 0;
+		var step = function(){
+			var doit = function(){
+				captureElement(snapshotTasks[current], function(){
+					current += 1;
+					if(current >= snapshotTasks.length) window.close()
+					else setTimeout(step, 100)
+				})
+			};
+			if(snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
+			else setTimeout(doit, 1)
+		};
+		setTimeout(step, 2000);
+	}
+})()
+</script>
+</body>

snapshot/iosevka-slab.css

@@ -0,0 +1,116 @@
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 100;
+	src: url('assets/iosevka-slab-thin.woff2') format('woff2'), url('assets/iosevka-slab-thin.woff') format('woff'), url('assets/iosevka-slab-thin.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 100;
+	font-style: italic;
+	src: url('assets/iosevka-slab-thinitalic.woff2') format('woff2'), url('assets/iosevka-slab-thinitalic.woff') format('woff'), url('assets/iosevka-slab-thinitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 100;
+	font-style: oblique;
+	src: url('assets/iosevka-slab-thinoblique.woff2') format('woff2'), url('assets/iosevka-slab-thinoblique.woff') format('woff'), url('assets/iosevka-slab-thinoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 200;
+	src: url('assets/iosevka-slab-extralight.woff2') format('woff2'), url('assets/iosevka-slab-extralight.woff') format('woff'), url('assets/iosevka-slab-extralight.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 200;
+	font-style: italic;
+	src: url('assets/iosevka-slab-extralightitalic.woff2') format('woff2'), url('assets/iosevka-slab-extralightitalic.woff') format('woff'), url('assets/iosevka-slab-extralightitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 200;
+	font-style: oblique;
+	src: url('assets/iosevka-slab-extralightoblique.woff2') format('woff2'), url('assets/iosevka-slab-extralightoblique.woff') format('woff'), url('assets/iosevka-slab-extralightoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 300;
+	src: url('assets/iosevka-slab-light.woff2') format('woff2'), url('assets/iosevka-slab-light.woff') format('woff'), url('assets/iosevka-slab-light.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 300;
+	font-style: italic;
+	src: url('assets/iosevka-slab-lightitalic.woff2') format('woff2'), url('assets/iosevka-slab-lightitalic.woff') format('woff'), url('assets/iosevka-slab-lightitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 300;
+	font-style: oblique;
+	src: url('assets/iosevka-slab-lightoblique.woff2') format('woff2'), url('assets/iosevka-slab-lightoblique.woff') format('woff'), url('assets/iosevka-slab-lightoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	src: url('assets/iosevka-slab-regular.woff2') format('woff2'), url('assets/iosevka-slab-regular.woff') format('woff'), url('assets/iosevka-slab-regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: italic;
+	src: url('assets/iosevka-slab-italic.woff2') format('woff2'), url('assets/iosevka-slab-italic.woff') format('woff'), url('assets/iosevka-slab-italic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: oblique;
+	src: url('assets/iosevka-slab-oblique.woff2') format('woff2'), url('assets/iosevka-slab-oblique.woff') format('woff'), url('assets/iosevka-slab-oblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 500;
+	src: url('assets/iosevka-slab-medium.woff2') format('woff2'), url('assets/iosevka-slab-medium.woff') format('woff'), url('assets/iosevka-slab-medium.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: italic;
+	font-weight: 500;
+	src: url('assets/iosevka-slab-mediumitalic.woff2') format('woff2'), url('assets/iosevka-slab-mediumitalic.woff') format('woff'), url('assets/iosevka-slab-mediumitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: oblique;
+	font-weight: 500;
+	src: url('assets/iosevka-slab-mediumoblique.woff2') format('woff2'), url('assets/iosevka-slab-mediumoblique.woff') format('woff'), url('assets/iosevka-slab-mediumoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 700;
+	src: url('assets/iosevka-slab-bold.woff2') format('woff2'), url('assets/iosevka-slab-bold.woff') format('woff'), url('assets/iosevka-slab-bold.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: italic;
+	font-weight: 700;
+	src: url('assets/iosevka-slab-bolditalic.woff2') format('woff2'), url('assets/iosevka-slab-bolditalic.woff') format('woff'), url('assets/iosevka-slab-bolditalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: oblique;
+	font-weight: 700;
+	src: url('assets/iosevka-slab-boldoblique.woff2') format('woff2'), url('assets/iosevka-slab-boldoblique.woff') format('woff'), url('assets/iosevka-slab-boldoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-weight: 900;
+	src: url('assets/iosevka-slab-heavy.woff2') format('woff2'), url('assets/iosevka-slab-heavy.woff') format('woff'), url('assets/iosevka-slab-heavy.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: italic;
+	font-weight: 900;
+	src: url('assets/iosevka-slab-heavyitalic.woff2') format('woff2'), url('assets/iosevka-slab-heavyitalic.woff') format('woff'), url('assets/iosevka-slab-heavyitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka Slab';
+	font-style: oblique;
+	font-weight: 900;
+	src: url('assets/iosevka-slab-heavyoblique.woff2') format('woff2'), url('assets/iosevka-slab-heavyoblique.woff') format('woff'), url('assets/iosevka-slab-heavyoblique.ttf') format('truetype');
+}

snapshot/iosevka.css

@@ -0,0 +1,116 @@
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 100;
+	src: url('assets/iosevka-thin.woff2') format('woff2'), url('assets/iosevka-thin.woff') format('woff'), url('assets/iosevka-thin.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 100;
+	font-style: italic;
+	src: url('assets/iosevka-thinitalic.woff2') format('woff2'), url('assets/iosevka-thinitalic.woff') format('woff'), url('assets/iosevka-thinitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 100;
+	font-style: oblique;
+	src: url('assets/iosevka-thinoblique.woff2') format('woff2'), url('assets/iosevka-thinoblique.woff') format('woff'), url('assets/iosevka-thinoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 200;
+	src: url('assets/iosevka-extralight.woff2') format('woff2'), url('assets/iosevka-extralight.woff') format('woff'), url('assets/iosevka-extralight.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 200;
+	font-style: italic;
+	src: url('assets/iosevka-extralightitalic.woff2') format('woff2'), url('assets/iosevka-extralightitalic.woff') format('woff'), url('assets/iosevka-extralightitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 200;
+	font-style: oblique;
+	src: url('assets/iosevka-extralightoblique.woff2') format('woff2'), url('assets/iosevka-extralightoblique.woff') format('woff'), url('assets/iosevka-extralightoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 300;
+	src: url('assets/iosevka-light.woff2') format('woff2'), url('assets/iosevka-light.woff') format('woff'), url('assets/iosevka-light.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 300;
+	font-style: italic;
+	src: url('assets/iosevka-lightitalic.woff2') format('woff2'), url('assets/iosevka-lightitalic.woff') format('woff'), url('assets/iosevka-lightitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 300;
+	font-style: oblique;
+	src: url('assets/iosevka-lightoblique.woff2') format('woff2'), url('assets/iosevka-lightoblique.woff') format('woff'), url('assets/iosevka-lightoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	src: url('assets/iosevka-regular.woff2') format('woff2'), url('assets/iosevka-regular.woff') format('woff'), url('assets/iosevka-regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: italic;
+	src: url('assets/iosevka-italic.woff2') format('woff2'), url('assets/iosevka-italic.woff') format('woff'), url('assets/iosevka-italic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: oblique;
+	src: url('assets/iosevka-oblique.woff2') format('woff2'), url('assets/iosevka-oblique.woff') format('woff'), url('assets/iosevka-oblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 500;
+	src: url('assets/iosevka-medium.woff2') format('woff2'), url('assets/iosevka-medium.woff') format('woff'), url('assets/iosevka-medium.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: italic;
+	font-weight: 500;
+	src: url('assets/iosevka-mediumitalic.woff2') format('woff2'), url('assets/iosevka-mediumitalic.woff') format('woff'), url('assets/iosevka-mediumitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: oblique;
+	font-weight: 500;
+	src: url('assets/iosevka-mediumoblique.woff2') format('woff2'), url('assets/iosevka-mediumoblique.woff') format('woff'), url('assets/iosevka-mediumoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 700;
+	src: url('assets/iosevka-bold.woff2') format('woff2'), url('assets/iosevka-bold.woff') format('woff'), url('assets/iosevka-bold.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: italic;
+	font-weight: 700;
+	src: url('assets/iosevka-bolditalic.woff2') format('woff2'), url('assets/iosevka-bolditalic.woff') format('woff'), url('assets/iosevka-bolditalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: oblique;
+	font-weight: 700;
+	src: url('assets/iosevka-boldoblique.woff2') format('woff2'), url('assets/iosevka-boldoblique.woff') format('woff'), url('assets/iosevka-boldoblique.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-weight: 900;
+	src: url('assets/iosevka-heavy.woff2') format('woff2'), url('assets/iosevka-heavy.woff') format('woff'), url('assets/iosevka-heavy.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: italic;
+	font-weight: 900;
+	src: url('assets/iosevka-heavyitalic.woff2') format('woff2'), url('assets/iosevka-heavyitalic.woff') format('woff'), url('assets/iosevka-heavyitalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Iosevka';
+	font-style: oblique;
+	font-weight: 900;
+	src: url('assets/iosevka-heavyoblique.woff2') format('woff2'), url('assets/iosevka-heavyoblique.woff') format('woff'), url('assets/iosevka-heavyoblique.ttf') format('truetype');
+}