edpibu/web2.0
1
Fork 0
Code Issues Activity

Replace roman font with variable slant font

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-03-06 13:09:43 +01:00
parent efd78bbe19
commit a13f365193
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.html
View file

@ -16,7 +16,7 @@
<link <link
rel="preload" rel="preload"
href="static/fonts/inter/Inter-roman.var.woff2?v=3.19" href="static/fonts/inter/Inter.var.woff2?v=3.19"
as="font" as="font"
type="font/woff2" type="font/woff2"
crossorigin /> crossorigin />

2
src/static/css/main.css
View file

@ -25,7 +25,7 @@
} }
body { body {
font-family: "Inter var", "Inter", sans-serif; font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
color: var(--text); color: var(--text);
margin: auto; margin: auto;
padding: var(--gap); padding: var(--gap);

BIN
src/static/fonts/inter/Inter-roman.var.woff2
View file

Binary file not shown.

BIN
src/static/fonts/inter/Inter.var.woff2 Normal file
View file

Binary file not shown.

25
src/static/fonts/inter/inter.css
View file

@ -1,17 +1,20 @@
/* ------------------------------------------------------- /* --------------------------------------------------------------------------
Variable font. [EXPERIMENTAL] Multi-axis, single variable font.
Usage:
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 }
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/ */
@font-face { @font-face {
font-family: 'Inter var'; font-family: 'Inter var experimental';
font-weight: 100 900; font-weight: 100 900;
font-display: swap; font-display: swap;
font-style: normal; font-style: oblique 0deg 10deg;
font-named-instance: 'Regular'; src: url("Inter.var.woff2?v=3.19") format("woff2");
src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
} }