added build script for web fonts.
This commit is contained in:
be5invis
parent
39479a493d
commit
eee739697d
10
README.md
10
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
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 302 KiB After Width: | Height: | Size: 302 KiB |
12
makefile
12
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 \
|
||||
|
|
|
|||
20
onegroup.mk
20
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
|
||||
|
|
|
|||
116
webfont-csses/iosevka-slab.css
Normal file
116
webfont-csses/iosevka-slab.css
Normal file
|
|
@ -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');
|
||||
}
|
||||
116
webfont-csses/iosevka.css
Normal file
116
webfont-csses/iosevka.css
Normal file
|
|
@ -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');
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user