diff options
| author | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 20:19:08 +0300 |
|---|---|---|
| committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 20:19:08 +0300 |
| commit | 5ab7512b88d4ac5c942341ff0cb04676d3a44ae3 (patch) | |
| tree | 79e907dc69c4148a460c6a7f2b27dd9fac7e1f1f | |
| parent | ff76bfd5f68ff2dfc537286cef2e8c9340e68323 (diff) | |
| download | inter-5ab7512b88d4ac5c942341ff0cb04676d3a44ae3.tar.xz | |
Update CSS (variable font)
| -rw-r--r-- | docs/inter-ui.css | 38 |
1 files changed, 30 insertions, 8 deletions
diff --git a/docs/inter-ui.css b/docs/inter-ui.css index 74b27bd32..466d1ac8e 100644 --- a/docs/inter-ui.css +++ b/docs/inter-ui.css @@ -88,13 +88,11 @@ url("font-files/Inter-UI-BlackItalic.woff?v=3.0") 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; } @@ -107,7 +105,7 @@ 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 safari-fix" for Safari, or explicitly set + Workaround: Use "Inter UI var alt" for Safari, or explicitly set `font-variation-settings:"slnt" DEGREE`. */ @font-face { @@ -117,9 +115,33 @@ BUGS: 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"); } + +/* -------------------------------------------------------------------------- + +"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 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"); + font-family: 'Inter UI var alt'; + font-weight: 400 900; + font-style: normal; + font-named-instance: 'Regular'; + src: url("font-files/Inter-UI-upright.var.woff2?v=3.0") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI-upright.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-upright.var.woff2?v=3.0") format("woff2"); +} +@font-face { + font-family: 'Inter UI var alt'; + font-weight: 400 900; + font-style: italic; + font-named-instance: 'Italic'; + src: url("font-files/Inter-UI-italic.var.woff2?v=3.0") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI-italic.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-italic.var.woff2?v=3.0") format("woff2"); } |