https://github.com/piazzai/sevka
A subset of Iosevka, custom-built
https://github.com/piazzai/sevka
fixed-width font font-family iosevka iosevka-font monospace-font sans-serif slab-serif true-type truetype ttf ttf-fonts typeface typeface-font typefaces web-font web-fonts webfont webfonts woff2
Last synced: 3 days ago
JSON representation
A subset of Iosevka, custom-built
- Host: GitHub
- URL: https://github.com/piazzai/sevka
- Owner: piazzai
- License: ofl-1.1
- Created: 2025-10-31T00:49:32.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2026-04-03T21:10:20.000Z (15 days ago)
- Last Synced: 2026-04-03T23:16:08.300Z (15 days ago)
- Topics: fixed-width, font, font-family, iosevka, iosevka-font, monospace-font, sans-serif, slab-serif, true-type, truetype, ttf, ttf-fonts, typeface, typeface-font, typefaces, web-font, web-fonts, webfont, webfonts, woff2
- Language: CSS
- Homepage:
- Size: 5.98 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sevka
Sevka is a subset of [Iosevka](https://typeof.net/Iosevka/) intended for online distribution. It constrains Iosevka to five weights (light, regular, medium, semibold, bold), one width (normal), and two slopes (upright, italic), resulting in 10 fonts against Iosevka's original 54.
To further reduce filesize, all OpenType features, character variants, and ligations are disabled at build time, and the fonts are reduced after build to either [US-ASCII](https://en.wikipedia.org/wiki/ASCII) or [Latin-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) characters. As a result, a basic TrueType bundle consisting of regular, italic, bold, and bold italic weights amounts to only 139.4 kB (ASCII) or 258.2 kB (Latin) against Iosevka's original 40.4 MB. In WOFF2 format, the size is further compressed to 57.8 kB (ASCII) and 100.9 kB (Latin), allowing fonts to load in a split second.
The font comes in three versions:
* Sevka: sans-serif, quasi-proportional
* Sevka Slab: serif, quasi-proportional
* Sevka Fixed: sans-serif, fixed width
Sevka and Sevka Slab are intended for body text and headings. Sevka Fixed is the true monospaced version, to be used for code, tables, and other environments where column width is constant.
## Specimen
## Motivation
Iosevka is a marvelous typeface. It is open-source, looks stunning, and comes in a variety of weights, widths, and slopes, with fixed-space and quasi-proportional versions, hundreds of character variants, ligatures, and a matching slab-serif family.
There is one problem with its use on the web, however. Due to extensive Unicode coverage, language support, OpenType features, ligature sets, and extensive customization options, its filesize is massive. Just the vanilla face (regular, normal width, upright, in TrueType format) is 9.9 MB. This is inconvenient for a website, especially if one does not even need full Unicode encoding but only ASCII or Latin characters.
Sevka is a solution to this problem. It is a heavily streamlined Iosevka build that only retains weights and shapes commonly found on the web, dropping all unnecessary glyphs and uneconomical features. This allows for a much leaner font that requires minimal bandwidth but covers virtually all use cases.
## Build
Prebuilt font files based on [Iosevka v34.3.0](https://github.com/be5invis/Iosevka/releases/tag/v34.3.0) are included in the `dist` folder. If you'd like to replicate the build process, install [node.js](https://nodejs.org/) and [pip](https://pypi.org/project/pip/). You might want to build the files yourself if you want a different release of Iosevka, or if you'd like to reintroduce particular features or character variants. If this is the case, please [read the docs](https://github.com/be5invis/Iosevka/blob/main/doc/custom-build.md#customized-build) and create new build plans through Iosevka's [customizer tool](https://typeof.net/Iosevka/customizer).
When you have your build plans, clone the Iosevka repo, `cd` into it, and copy the plans.
```bash
git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka && cp ../private-build-plans.toml private-build-plans.toml
```
The build process requires [ttfautohint](https://freetype.org/ttfautohint/), and [glyphhanger](https://www.zachleat.com/web/glyphhanger/) to be installed on your computer. Both are available via `npm` and can be installed globally.
```bash
npm install -g ttfautohint
npm install -g glyphhanger
```
Install local dependencies and build the fonts.
```bash
npm install
npm run build -- contents::Sevka
npm run build -- contents::SevkaSlab
npm run build -- contents::SevkaFixed
```
Creating subsets requires the [fonttools](https://pypi.org/project/fonttools/) and [brotli](https://pypi.org/project/brotli/) Python libraries. They can be installed with `pip`.
```bash
pip install fonttools
pip install brotli
```
Now you can run `subset.sh` to reduce the files previously built to ASCII and Latin characters.
```bash
bash ../subset.sh
```
Copy the resulting fonts into the root directory, `cd` back, and delete the Iosevka repo.
```bash
mv dist/ascii ../
mv dist/latin ../
cd .. && rm -rf Iosevka
```
Done! Your files are in the `ascii` and `latin` folders.
## Usage
Copy the fonts to your project's asset directory and load them with the CSS blocks included in `ascii/sevka.css` or `latin/sevka.css`. Alternative stylesheets can be found in `ascii` and `latin`'s subfolders, in case you only want to load the TrueType or WOFF2 versions.
You can also use the more compact Sass syntax:
```scss
$faces: (
Sevka: "Sevka",
SevkaSlab: "Sevka Slab",
SevkaFixed: "Sevka Fixed",
);
$styles: (
normal: "",
italic: "Italic",
);
$weights: (
"Light": 300,
"Medium": 500,
"SemiBold": 600,
"Bold": 700,
);
@each $face, $face-value in $faces {
@font-face {
font-family: "#{$face-value}";
font-display: swap;
font-style: normal;
font-weight: 400;
src: url("path/to/fonts/#{$face}-Regular.ttf") format("truetype") url("path/to/fonts/#{$face}-Regular.woff2") format("woff2");
}
@font-face {
font-family: "#{$face-value}";
font-display: swap;
font-style: italic;
font-weight: 400;
src: url("path/to/fonts/#{$face}-Italic.ttf") format("truetype") url("path/to/fonts/#{$face}-Italic.woff2") format("woff2");
}
@each $style, $style-value in $styles {
@each $weight, $weight-value in $weights {
@font-face {
font-family: "#{$face-value}";
font-display: swap;
font-style: #{$style};
font-weight: #{$weight-value};
src: url("path/to/fonts/#{$face}-#{$weight}#{$style-value}.ttf") format("truetype") url("path/to/fonts/#{$face}-#{$weight}#{$style-value}.woff2") format("woff2");
}
}
}
}
```