diff options
author | Rasmus Andersson <rasmus@notion.se> | 2020-08-22 02:06:02 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2020-08-22 02:06:02 +0300 |
commit | 57e80b4ab06b6b80a2bf1b35fd7aa8efdbafa0f0 (patch) | |
tree | 55459ddbe78fb6adc54175c81291179e3f0a3133 /docs/inter-display.css | |
parent | 15e2d60523565b94aafdf31f3e61ae7ab8f7de3e (diff) | |
download | inter-57e80b4ab06b6b80a2bf1b35fd7aa8efdbafa0f0.tar.xz |
web: enable use of subset web font files (for variable fonts only)
Diffstat (limited to 'docs/inter-display.css')
-rw-r--r-- | docs/inter-display.css | 222 |
1 files changed, 17 insertions, 205 deletions
diff --git a/docs/inter-display.css b/docs/inter-display.css index 96c47c4cf..f9efe79d5 100644 --- a/docs/inter-display.css +++ b/docs/inter-display.css @@ -2,221 +2,33 @@ layout: none --- {% assign font_v = site.data.fontinfo[0].version %} -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff"); -} +/* +Font families defined by this CSS: -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff"); -} +- "InterDisplay" static "traditional" fonts for older web browsers +- "InterDisplay var" single-axis variable fonts for all modern browsers +- "InterDisplay var experimental" multi-axis variable fonts for modern web browsers -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff"); -} +Use like this in your CSS: -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff"); -} - -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff"); -} - -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff"); -} - -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff"); -} - -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff"); -} - -@font-face { - font-family: 'InterDisplay'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff"); -} -@font-face { - font-family: 'InterDisplay'; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff"); -} - -/* ------------------------------------------------------- -Variable font. -Usage: - - html { font-family: 'InterDisplay', sans-serif; } + h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay', sans-serif; } @supports (font-variation-settings: normal) { - html { font-family: 'InterDisplay var', sans-serif; } + h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay var', sans-serif; } } -*/ -@font-face { - font-family: 'InterDisplay var'; - font-weight: 100 900; - font-style: normal; - font-named-instance: 'Regular'; - font-display: swap; - src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2"); -} -@font-face { - font-family: 'InterDisplay var'; - font-weight: 100 900; - font-style: italic; - font-named-instance: 'Italic'; - font-display: swap; - src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2"); -} -/* Legacy naming compatibility */ -@font-face { - font-family: 'InterDisplay var alt'; - font-weight: 100 900; - font-style: normal; - font-named-instance: 'Regular'; - font-display: swap; - src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2"); -} -@font-face { - font-family: 'InterDisplay var alt'; - font-weight: 100 900; - font-style: italic; - font-named-instance: 'Italic'; - font-display: swap; - src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2"); -} +------------------------- static ------------------------- */ +{% include InterDisplay-static.css %} +/* ----------------------- variable ----------------------- */ +{% include InterDisplay-italic.var.css %} +{% include InterDisplay-roman.var.css %} -/* -------------------------------------------------------------------------- -[EXPERIMENTAL] Multi-axis, single variable font. +/* ----------- experimental multi-axis variable ----------- Slant axis is not yet widely supported (as of February 2019) and thus this -multi-axis single variable font is opt-in rather than the default. - -When using this, you will probably need to set font-variation-settings -explicitly, e.g. - +multi-axis single-file variable font is opt-in rather than the default. +When using this, you will likely need to set font-variation-settings explicitly, e.g: * { font-variation-settings: "slnt" 0deg } .italic { font-variation-settings: "slnt" 10deg } - */ -@font-face { - font-family: 'InterDisplay var experimental'; - font-weight: 100 900; - font-style: oblique 0deg 10deg; - font-display: swap; - src: url("font-files/InterDisplay.var.woff2?v={{font_v}}") format("woff2"); -} +{% include InterDisplay.var.css %} |