diff --git a/README.md b/README.md
index f7e23b1..a58ef5e 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,16 @@ To build Iosevka you should:
 
 You will find TTFs in the `dist/` directory.
 
+### Building web font
+
+The `webfonts/` directory is used to build Iosevka for web font uses. To build the web fonts you should:
+
+1. Build Iosevka.
+2. Ensure that `sfnt2woff` and `woff2_compress` are installed and runnable.
+3. `make webfonts`.
+
+The web fonts will be generated into `dist/webfonts`.
+
 ## Build your own style
 
 ![Styles Preview](https://raw.githubusercontent.com/be5invis/Iosevka/master/images/variants.png)
diff --git a/images/variants.png b/images/variants.png
index 5c769fe..908fbe5 100644
Binary files a/images/variants.png and b/images/variants.png differ
diff --git a/images/weights.png b/images/weights.png
index ba65383..d95316d 100644
Binary files a/images/weights.png and b/images/weights.png differ
diff --git a/makefile b/makefile
index f1d8b1d..694fe95 100644
--- a/makefile
+++ b/makefile
@@ -33,6 +33,16 @@ test-default : fonts-default
 test-slab : fonts-slab
 	@$(MAKE) -f onegroup.mk test $(PARAM_SLAB)
 
+# Webfonts
+dist/webfonts : | dist
+	@- mkdir $@
+dist/webfonts/assets : |dist/webfonts
+	@- mkdir $@
+webfonts-default : fonts-default | dist/webfonts/assets
+	@$(MAKE) -f onegroup.mk webfonts $(PARAM_DEFAULT)
+webfonts-slab : fonts-slab | dist/webfonts/assets
+	@$(MAKE) -f onegroup.mk webfonts $(PARAM_SLAB)
+
 # Pages
 pages-default : fonts-default
 	@$(MAKE) -f onegroup.mk pages $(PARAM_DEFAULT)
@@ -73,6 +83,8 @@ releasepack-zshaped : fonts-zshaped
 release-all : releasepack-default releasepack-fw releasepack-cc releasepack-hooky releasepack-zshaped
 fw : fonts-fw fonts-cc
 
+webfonts : webfonts-default webfonts-slab
+
 images/weights.png : fonts-default fonts-slab
 	convert -size 4800x1700 xc:white -pointsize 125 \
 		-fill black \
diff --git a/onegroup.mk b/onegroup.mk
index 5870a0d..8173fb4 100644
--- a/onegroup.mk
+++ b/onegroup.mk
@@ -135,10 +135,27 @@ $(PAGESTTF) : $(PAGEDIR)/%.ttf : $(DISTDIR)/%.ttf
 PAGESWOFF = $(subst .ttf,.woff,$(PAGESTTF))
 $(PAGESWOFF) : $(PAGEDIR)/%.woff : $(PAGEDIR)/%.ttf
 	sfnt2woff $<
+PAGESWOFF2 = $(subst .ttf,.woff2,$(PAGESTTF))
+$(PAGESWOFF2) : $(PAGEDIR)/%.woff2 : $(PAGEDIR)/%.ttf
+	woff2_compress $<
 PAGESMAPS = $(subst $(OBJDIR)/,$(PAGEDIR)/,$(MAPS))
 $(PAGESMAPS) : $(PAGEDIR)/%.charmap : $(OBJDIR)/%.charmap
 	cp $< $@
 
+WEBFONTDIR = dist/webfonts/assets
+WEBFONTSTTF = $(subst $(DISTDIR)/,$(WEBFONTDIR)/,$(DISTTARGETS))
+$(WEBFONTSTTF) : $(WEBFONTDIR)/%.ttf : $(DISTDIR)/%.ttf
+	cp $< $@
+WEBFONTSWOFF = $(subst .ttf,.woff,$(WEBFONTSTTF))
+$(WEBFONTSWOFF) : $(WEBFONTDIR)/%.woff : $(WEBFONTDIR)/%.ttf
+	sfnt2woff $<
+WEBFONTSWOFF2 = $(subst .ttf,.woff2,$(WEBFONTSTTF))
+$(WEBFONTSWOFF2) : $(WEBFONTDIR)/%.woff2 : $(WEBFONTDIR)/%.ttf
+	woff2_compress $<
+WEBFONTCSS = dist/webfonts/$(ARCPREFIX)$(ARCPREFIXB).css
+$(WEBFONTCSS) : webfont-csses/$(ARCPREFIX)$(ARCPREFIXB).css
+	cp $< $@
+
 #$(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).tar.bz2 : $(DISTTARGETS)
 #	cd $(DISTDIR) && tar -cjvf ../$@ $(subst $(DISTDIR)/,,$^)
 $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip : $(DISTTARGETS)
@@ -148,7 +165,8 @@ $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).7z : $(DISTTARGETS)
 
 #archives : $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).tar.bz2 $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip
 archives : $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).7z
-pages : $(PAGESTTF) $(PAGESWOFF) $(PAGESMAPS)
+pages : $(PAGESTTF) $(PAGESWOFF) $(PAGESWOFF2) $(PAGESMAPS)
+webfonts : $(WEBFONTSTTF) $(WEBFONTSWOFF) $(WEBFONTSWOFF2) $(WEBFONTCSS)
 
 # testdrive
 TESTDIR = testdrive/assets
diff --git a/webfont-csses/iosevka-slab.css b/webfont-csses/iosevka-slab.css
new file mode 100644
index 0000000..9d5c537
--- /dev/null
+++ b/webfont-csses/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');
+}
\ No newline at end of file
diff --git a/webfont-csses/iosevka.css b/webfont-csses/iosevka.css
new file mode 100644
index 0000000..6eaf284
--- /dev/null
+++ b/webfont-csses/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');
+}
\ No newline at end of file