archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS (variable font)

Browse source
This commit is contained in:
Rasmus Andersson 2018-10-11 10:28:06 -07:00
parent 5ab7512b88
commit c10bbc8a18
2 changed files with 58 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

7
docs/index-var.css
View file

@ -46,7 +46,8 @@
/*border-top: 1px solid #ddd;*/ /*border-top: 1px solid #ddd;*/
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
color: #333; color: #333;
padding:20px 20px 20px 20px; padding: 20px 0;
overflow: hidden;
} }
.variable .unsupported-message.active + .ctrl { .variable .unsupported-message.active + .ctrl {
@ -58,7 +59,8 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding:5px; padding: 5px 0;
flex-wrap: wrap;
} }
.variable .ctrl input { .variable .ctrl input {
margin: 0 8px 0 0; margin: 0 8px 0 0;
@ -72,6 +74,7 @@
display: flex; display: flex;
flex: 0 1 auto; flex: 0 1 auto;
align-items: center; align-items: center;
margin: 5px;
margin-right: 20px; margin-right: 20px;
/*background:lightpink;*/ /*background:lightpink;*/
} }

82
misc/dist/inter-ui.css vendored
View file

@ -2,16 +2,14 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-Regular.woff2") format("woff2"),
url("Inter-UI-Regular.woff2") format("woff2"),
url("Inter-UI-Regular.woff") format("woff"); url("Inter-UI-Regular.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-Italic.woff2") format("woff2"),
url("Inter-UI-Italic.woff2") format("woff2"),
url("Inter-UI-Italic.woff") format("woff"); url("Inter-UI-Italic.woff") format("woff");
} }
@ -19,16 +17,14 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-Medium.woff2") format("woff2"),
url("Inter-UI-Medium.woff2") format("woff2"),
url("Inter-UI-Medium.woff") format("woff"); url("Inter-UI-Medium.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-MediumItalic.woff2") format("woff2"),
url("Inter-UI-MediumItalic.woff2") format("woff2"),
url("Inter-UI-MediumItalic.woff") format("woff"); url("Inter-UI-MediumItalic.woff") format("woff");
} }
@ -36,16 +32,14 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-SemiBold.woff2") format("woff2"),
url("Inter-UI-SemiBold.woff2") format("woff2"),
url("Inter-UI-SemiBold.woff") format("woff"); url("Inter-UI-SemiBold.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-SemiBoldItalic.woff2") format("woff2"),
url("Inter-UI-SemiBoldItalic.woff2") format("woff2"),
url("Inter-UI-SemiBoldItalic.woff") format("woff"); url("Inter-UI-SemiBoldItalic.woff") format("woff");
} }
@ -53,16 +47,14 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-Bold.woff2") format("woff2"),
url("Inter-UI-Bold.woff2") format("woff2"),
url("Inter-UI-Bold.woff") format("woff"); url("Inter-UI-Bold.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-BoldItalic.woff2") format("woff2"),
url("Inter-UI-BoldItalic.woff2") format("woff2"),
url("Inter-UI-BoldItalic.woff") format("woff"); url("Inter-UI-BoldItalic.woff") format("woff");
} }
@ -70,16 +62,14 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 800; font-weight: 800;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-ExtraBold.woff2") format("woff2"),
url("Inter-UI-ExtraBold.woff2") format("woff2"),
url("Inter-UI-ExtraBold.woff") format("woff"); url("Inter-UI-ExtraBold.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 800; font-weight: 800;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"),
url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"),
url("Inter-UI-ExtraBoldItalic.woff") format("woff"); url("Inter-UI-ExtraBoldItalic.woff") format("woff");
} }
@ -87,24 +77,22 @@
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-Black.woff2") format("woff2"),
url("Inter-UI-Black.woff2") format("woff2"),
url("Inter-UI-Black.woff") format("woff"); url("Inter-UI-Black.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 900;
src: url('Inter-UI.var.woff2') format("woff2-variations"), src: url("Inter-UI-BlackItalic.woff2") format("woff2"),
url("Inter-UI-BlackItalic.woff2") format("woff2"),
url("Inter-UI-BlackItalic.woff") format("woff"); url("Inter-UI-BlackItalic.woff") format("woff");
} }
/* /* --------------------------------------------------------------------------
Single variable font. Single variable font.
Note that you may want to do something like this to make sure you're serving Note that you may want to do something like this to make sure you're serving
constant fonts to older browsers: constant fonts to older browsers:
html { html {
font-family: 'Inter UI', sans-serif; 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-face {
font-family: 'Inter UI var'; font-family: 'Inter UI var';
font-weight: 400 900; /* safe weight range */ font-weight: 400 900;
src: url('Inter-UI.var.woff2') format("woff2-variations"), font-style: oblique 0deg 10deg;
url('Inter-UI.var.woff2') format("woff2"); 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");
} }