diff options
author | Rasmus Andersson <rasmus@notion.se> | 2020-04-07 21:07:33 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2020-04-07 21:07:33 +0300 |
commit | 7edb70b69eefd14b931422cf6bfc74ceda062f3a (patch) | |
tree | f04604c2cba9098209f68ddbaba5b6eaabcf5515 /docs/inter-display.css | |
parent | 776f39d74f61775e0d1627aba8f4492c4019893b (diff) | |
download | inter-7edb70b69eefd14b931422cf6bfc74ceda062f3a.tar.xz |
web: wip add display
Diffstat (limited to 'docs/inter-display.css')
-rw-r--r-- | docs/inter-display.css | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/docs/inter-display.css b/docs/inter-display.css new file mode 100644 index 000000000..96c47c4cf --- /dev/null +++ b/docs/inter-display.css @@ -0,0 +1,222 @@ +--- +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-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"); +} + +@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"); +} + +@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; } + @supports (font-variation-settings: normal) { + html { 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"); +} + + +/* -------------------------------------------------------------------------- +[EXPERIMENTAL] Multi-axis, single variable font. + +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. + + * { 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"); +} |