@font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 400; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-Regular.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-Regular.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 400; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-Italic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-Italic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 500; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-Medium.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-Medium.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 500; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-MediumItalic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-MediumItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 600; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-SemiBold.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-SemiBold.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 600; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-SemiBoldItalic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-SemiBoldItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 700; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-Bold.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-Bold.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 700; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-BoldItalic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-BoldItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 800; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-ExtraBold.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-ExtraBold.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 800; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-ExtraBoldItalic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-ExtraBoldItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 900; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-Black.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-Black.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 900; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI-BlackItalic.woff2?v=3.0") format("woff2"), url("font-files/Inter-UI-BlackItalic.woff?v=3.0") format("woff"); } /* ------------------------------------------------------------------------------ Alternative to the above: 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 safari-fix" for Safari, or explicitly set `font-variation-settings:"slnt" DEGREE`. */ @font-face { font-family: 'Inter UI var'; font-weight: 400 900; font-style: oblique 0deg 10deg; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2"); } @font-face { font-family: 'Inter UI var safari-fix'; font-style: oblique 0deg 10deg; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2"); }