@slite/style/src/fonts.css

Slite shared style

@font-face {
  font-family: FixEmoji;
  /* Full unicode emoji ranges + ZERO WITH JOINER (U+200D) */
  unicode-range: U+200D, U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF,
    U+2600-26FF;
  src: local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Segoe UI'),
    local('Apple Color Emoji'), local('Android Emoji'), local(EmojiSymbols),
    local(Symbola), local('Arial');
}

.font-family-system {
  font-family: var(--font-family-system);
}
.font-family-title {
  font-family: var(--font-family-title);
}
.font-family-monospace {
  font-family: var(--font-family-monospace);
}

@each $size in (smallest, smaller, small, normal, large, larger, largest) {
  .font-size-$(size) {
    font-size: var(--font-size-$(size));
  }

  .line-height-$(size) {
    line-height: var(--font-size-$(size));
  }
}

.bold {
  font-weight: bold;
}

@each $weight in (light, regular, medium, semibold, bold) {
  .font-weight-$(weight) {
    font-weight: var(--font-weight-$(weight));
  }
  .font-weight-$(weight)-on-hover:hover {
    font-weight: var(--font-weight-$(weight));
  }
}

@each $height in (one, normal, large, larger, largest) {
  .line-height-$(height) {
    line-height: var(--line-height-$(height));
  }
}

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.underline {
  text-decoration: underline;
}
.underline-on-hover:hover {
  text-decoration: underline;
}
.italic {
  font-style: italic;
}
.letter-spacing-small {
  letter-spacing: 0.4px;
}

/* UniversalSans family */

@font-face {
  font-family: 'UniversalSans';
  src: url('https://assets.slite.com/fonts/UniversalSansGX-Regular.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Regular.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Regular.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'UniversalSans';
  src: url('https://assets.slite.com/fonts/UniversalSansGX-Medium.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Medium.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Medium.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 500;
}

@font-face {
  font-family: 'UniversalSans';
  src: url('https://assets.slite.com/fonts/UniversalSansGX-Bold.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Bold.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/UniversalSansGX-Bold.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 700;
}

/* Garnett family */

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Black.woff2') format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Black.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Black.ttf') format('truetype');
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-BlackItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-BlackItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-BlackItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Semibold.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Semibold.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Semibold.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Semibold.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Semibold.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Semibold.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-SemiboldItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Medium.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Medium.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Medium.ttf') format('truetype');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-MediumItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-MediumItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-MediumItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Regular.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Regular.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-RegularItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-RegularItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-RegularItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-Light.woff2') format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-Light.woff') format('woff'),
    url('https://assets.slite.com/fonts/Garnett-Light.ttf') format('truetype');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Garnett';
  src: url('https://assets.slite.com/fonts/Garnett-LightItalic.woff2')
      format('woff2'),
    url('https://assets.slite.com/fonts/Garnett-LightItalic.woff')
      format('woff'),
    url('https://assets.slite.com/fonts/Garnett-LightItalic.ttf')
      format('truetype');
  font-display: swap;
  font-weight: 300;
  font-style: italic;
}