From c10bbc8a186cd7ee89d478653729355338066f46 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Thu, 11 Oct 2018 10:28:06 -0700 Subject: [PATCH] Update CSS (variable font) --- docs/index-var.css | 7 ++-- misc/dist/inter-ui.css | 82 +++++++++++++++++++++++++++--------------- 2 files changed, 58 insertions(+), 31 deletions(-) diff --git a/docs/index-var.css b/docs/index-var.css index 97d69fa72..1ef910004 100644 --- a/docs/index-var.css +++ b/docs/index-var.css @@ -46,7 +46,8 @@ /*border-top: 1px solid #ddd;*/ border-bottom: 1px solid #ddd; color: #333; - padding:20px 20px 20px 20px; + padding: 20px 0; + overflow: hidden; } .variable .unsupported-message.active + .ctrl { @@ -58,7 +59,8 @@ display: flex; justify-content: flex-start; align-items: center; - padding:5px; + padding: 5px 0; + flex-wrap: wrap; } .variable .ctrl input { margin: 0 8px 0 0; @@ -72,6 +74,7 @@ display: flex; flex: 0 1 auto; align-items: center; + margin: 5px; margin-right: 20px; /*background:lightpink;*/ } diff --git a/misc/dist/inter-ui.css b/misc/dist/inter-ui.css index f62dd605f..e76de090d 100644 --- a/misc/dist/inter-ui.css +++ b/misc/dist/inter-ui.css @@ -2,16 +2,14 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 400; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-Regular.woff2") format("woff2"), + src: url("Inter-UI-Regular.woff2") format("woff2"), url("Inter-UI-Regular.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 400; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-Italic.woff2") format("woff2"), + src: url("Inter-UI-Italic.woff2") format("woff2"), url("Inter-UI-Italic.woff") format("woff"); } @@ -19,16 +17,14 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 500; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-Medium.woff2") format("woff2"), + src: url("Inter-UI-Medium.woff2") format("woff2"), url("Inter-UI-Medium.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 500; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-MediumItalic.woff2") format("woff2"), + src: url("Inter-UI-MediumItalic.woff2") format("woff2"), url("Inter-UI-MediumItalic.woff") format("woff"); } @@ -36,16 +32,14 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 600; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-SemiBold.woff2") format("woff2"), + src: url("Inter-UI-SemiBold.woff2") format("woff2"), url("Inter-UI-SemiBold.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 600; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-SemiBoldItalic.woff2") format("woff2"), + src: url("Inter-UI-SemiBoldItalic.woff2") format("woff2"), url("Inter-UI-SemiBoldItalic.woff") format("woff"); } @@ -53,16 +47,14 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 700; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-Bold.woff2") format("woff2"), + src: url("Inter-UI-Bold.woff2") format("woff2"), url("Inter-UI-Bold.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 700; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-BoldItalic.woff2") format("woff2"), + src: url("Inter-UI-BoldItalic.woff2") format("woff2"), url("Inter-UI-BoldItalic.woff") format("woff"); } @@ -70,16 +62,14 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 800; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-ExtraBold.woff2") format("woff2"), + src: url("Inter-UI-ExtraBold.woff2") format("woff2"), url("Inter-UI-ExtraBold.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 800; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"), + src: url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"), url("Inter-UI-ExtraBoldItalic.woff") format("woff"); } @@ -87,24 +77,22 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 900; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-Black.woff2") format("woff2"), + src: url("Inter-UI-Black.woff2") format("woff2"), url("Inter-UI-Black.woff") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 900; - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url("Inter-UI-BlackItalic.woff2") format("woff2"), + src: url("Inter-UI-BlackItalic.woff2") format("woff2"), url("Inter-UI-BlackItalic.woff") 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; } @@ -114,10 +102,46 @@ html { } } +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: 400 900; /* safe weight range */ - src: url('Inter-UI.var.woff2') format("woff2-variations"), - url('Inter-UI.var.woff2') format("woff2"); + font-weight: 400 900; + font-style: oblique 0deg 10deg; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI.var.woff2") 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: 400 900; + font-style: normal; + font-named-instance: 'Regular'; + src: url("Inter-UI-upright.var.woff2") format("woff2 supports variations(gvar)"), + url("Inter-UI-upright.var.woff2") format("woff2-variations"), + url("Inter-UI-upright.var.woff2") format("woff2"); +} +@font-face { + font-family: 'Inter UI var alt'; + font-weight: 400 900; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-UI-italic.var.woff2") format("woff2 supports variations(gvar)"), + url("Inter-UI-italic.var.woff2") format("woff2-variations"), + url("Inter-UI-italic.var.woff2") format("woff2"); }