inter/docs/inter-ui.css

---
layout: none
---
{% assign font_v = site.data.fontinfo[0].version %}/*

LEGACY -- this file is deprecated.

The font changed name from "Inter UI" to "Inter" in February 2019.
This file is still here to support older uses of the name "Inter UI".

Please use "inter.css" instead for new applications.

*/
@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 100;
  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 100;
  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 200;
  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 200;
  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 300;
  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 300;
  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 400;
  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 400;
  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 500;
  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 500;
  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 600;
  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 600;
  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 700;
  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 700;
  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 800;
  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 800;
  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 900;
  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 900;
  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
       url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
}

/* --------------------------------------------------------------------------
Single variable font.

Note that you may want to do something like this to make sure you're serving
constant fonts to older browsers:
html {
  font-family: 'Inter UI', sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter UI var', sans-serif;
  }
}

BUGS:
- Safari 12.0 will default to italic instead of regular when font-weight
  is provided in a @font-face declaration.
  Workaround: Use "Inter UI var alt" for Safari, or explicitly set
  `font-variation-settings:"slnt" DEGREE`.
*/
@font-face {
  font-family: 'Inter UI var';
  font-weight: 100 900;
  font-style: oblique 0deg 10deg;
  src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
}

/* --------------------------------------------------------------------------

"Inter UI var alt" is recommended for Safari and Edge, for reliable italics.

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter UI var alt', sans-serif;
  }
}

*/
@font-face {
  font-family: 'Inter UI var alt';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("font-files/Inter-roman.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
  font-family: 'Inter UI var alt';
  font-weight: 100 900;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}