twindy/src/preset/inter.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

@require "../mixins/base.styl";

// Set inter as default font.
// Make sure you made it available
// 1. Download from https://rsms.me/inter/
// 2. To index.html add something like:
// _  <link rel="stylesheet" href="/inter/inter.css" />
// 
// Or via npm:
// 1. `npm install --save inter-ui`
// 2. In .styl file:
// _  @import "inter-ui/inter.css"
// _  tw-inter()
// 
tw-inter() {
  if __tw_once("inter") {
    $font-fallback = "Helvetica Neue", "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    html, body {
      font-family: sans-serif, sans;
      font-family: "Inter", $font-fallback;
      // "l" better distinguishable
      // https://rsms.me/inter/#features/cvXX
      font-feature-settings: "cv05" 1;

      @supports (font-variation-settings: normal) {
        font-family: "Inter var", $font-fallback;
      }
    }

    // Fix for Firefox
    select > * {
      font-family: "Inter", $font-fallback;
      font-size: 1em;
    }
  }
}