@1adybug/mi-sans

Self-host MiSans VF with a variable weight axis and Unicode-range WOFF2 subsets.

npm install @1adybug/mi-sans

Import one of these equivalent CSS entry points in your application:

import "@1adybug/mi-sans";
// Or: import "@1adybug/mi-sans/wght";
// Or: import "@1adybug/mi-sans/wght.css";

body {
  font-family: "MiSans VF", sans-serif;
  font-weight: 330;
}

Font data

• Weight axis: 150–700, native default 330; normal style.
• 56 local WOFF2 files, loaded by character range.
• Font version: MiSans VF (official split WOFF2).
• No runtime dependencies or install scripts; no external font service requests.
• metadata.json, unicode.json, sources.json, and files/* are exported.

Native weight instances

The complete named weight instances from the source font's fvar table are listed below. Names and coordinates are preserved; the package does not normalize the weight axis. The axis is continuous: any weight within 150–700 is supported, not just these instances.

| Native instance | font-weight / wght | | --- | --- | | Thin | 150 | | ExtraLight | 200 | | Light | 250 | | Normal | 305 | | Regular | 330 | | Medium | 380 | | Demibold | 450 | | Semibold | 520 | | Bold | 630 | | Heavy | 700 |

CSS normal means 400 and bold means 700, regardless of the font's native default or instance names. Importing this package only registers @font-face rules; it does not set the application's body weight or remap CSS keywords. Weights outside the supported axis range are clamped to the nearest endpoint.

See the CSS font-weight specification.

MiSans weight mapping

MiSans's native Normal (305) is a named instance, not the CSS keyword normal. Use Regular (330) for the regular UI role. Demibold (450) and Semibold (520) are separate instances; the examples map the semibold role to Semibold. These are application styles; importing the font package does not apply this mapping.

Plain CSS

After importing the package's CSS, define the weights in your application stylesheet:

:root {
  --mi-weight-regular: 330;
  --mi-weight-medium: 380;
  --mi-weight-demibold: 450;
  --mi-weight-semibold: 520;
  --mi-weight-bold: 630;
}

body {
  font-family: "MiSans VF", sans-serif;
  font-weight: var(--mi-weight-regular);
}

.text-medium {
  font-weight: var(--mi-weight-medium);
}

.text-demibold {
  font-weight: var(--mi-weight-demibold);
}

.text-semibold {
  font-weight: var(--mi-weight-semibold);
}

b,
strong,
.text-bold {
  font-weight: var(--mi-weight-bold);
}

Explicit normal, bold, bolder, numeric weights, and font shorthands elsewhere in your application still need to use the intended native weight. Setting only the body weight does not remap headings, Markdown styles, or third-party components.

Tailwind CSS v4

For an application that uses MiSans globally, put this in the main CSS entry point. It imports the font and maps Tailwind's weight utilities to MiSans's native instances:

@import "tailwindcss";
@import "@1adybug/mi-sans";

@theme {
  --font-sans: "MiSans VF", sans-serif;
  --font-weight-thin: 150;
  --font-weight-extralight: 200;
  --font-weight-light: 250;
  --font-weight-native-normal: 305;
  --font-weight-normal: 330;
  --font-weight-medium: 380;
  --font-weight-demibold: 450;
  --font-weight-semibold: 520;
  --font-weight-bold: 630;
  --font-weight-heavy: 700;
  --font-weight-extrabold: 700;
  --font-weight-black: 700;
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
  }

  b,
  strong {
    font-weight: var(--font-weight-bold);
  }
}

<p class="font-sans font-normal">Regular: 330</p>
<p class="font-sans font-medium">Medium: 380</p>
<p class="font-sans font-demibold">Demibold: 450</p>
<p class="font-sans font-semibold">Semibold: 520</p>
<p class="font-sans font-bold">Bold: 630</p>

font-native-normal selects the native Normal instance (305), while font-normal selects Regular (330). font-heavy selects Heavy (700). There are no separate native ExtraBold or Black instances, so this example deliberately aliases font-extrabold and font-black to Heavy (700).

This changes the application's global weight utilities. For mixed-font applications, keep the default theme and use explicit weights such as class="font-sans font-[330]" with the MiSans font family configured. Raw CSS keywords, numeric weights, and component styles are not remapped by the Tailwind theme.

See Tailwind's font weight documentation and theme customization.

Copyright and license

Copyright Xiaomi Inc.. Font rights remain with the original copyright holder. The original vendor license is included as LICENSE.pdf; it is not an MIT or SIL OFL font license. This is an independently maintained package, not an official vendor package.

Official font source. File hashes and original download details are recorded in sources.json.