Sevka is a subset of 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 the US-ASCII or Latin-1 character sets. As a result, a basic TrueType bundle consisting of regular, italic, bold, and bold italic weighs 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.

Iosevka is a marvelous typeface. It is open-source, it looks stunning, and it 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, though. Due to extensive Unicode coverage, language support, customization options, OpenType features, and ligature sets, its filesize is massive. Just the vanilla face (regular, normal width, upright, in TrueType format) is 9.9 MB. This is unacceptable for a website, especially if it doesn't even need full Unicode encoding because it only needs to render 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 ensures legibility at various display sizes.

Prebuilt font files based on Iosevka v33.3.3 are included in the dist folder. If you'd like to replicate the build process, install node.js, ttfautohint, and glyphhanger. 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 and create new build plans through Iosevka's customizer tool.

When you have your build plans, clone the Iosevka repo, cd into it, and copy the plans.

git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka && cp ../private-build-plans.toml private-build-plans.toml

Install local dependencies and build the fonts.

npm install
npm run build -- contents::Sevka
npm run build -- contents::SevkaSlab
npm run build -- contents::SevkaFixed

Run subset.sh to reduce the files you've just built to ASCII and Latin characters.

bash ../subset.sh

Copy the resulting fonts into the root directory, cd back, and delete the Iosevka repo.

mv dist/ascii ../ascii
mv dist/latin ../latin
cd .. && rm -rf Iosevka

Done! Your files are in the ascii and latin folders.

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:

$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");
      }
    }
  }
}