edpibu/web2.0
1
Fork 0
Code Issues Activity

Add font preloading

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-03-06 11:55:19 +01:00
parent fb074ed8b9
commit 43dd909d0c
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 17 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/index.html
View file

@ -9,7 +9,23 @@
<link rel="canonical" href="https://edgarpierre.fr/" /> <link rel="canonical" href="https://edgarpierre.fr/" />
<link rel="icon" href="static/svg/logo.svg" /> <link rel="icon" href="static/svg/logo.svg" />
<link rel="stylesheet" href="static/fonts/inter/inter.css" />
<link rel="stylesheet" href="static/fonts/remix/remixicon.css" />
<link rel="stylesheet" href="static/css/main.css" /> <link rel="stylesheet" href="static/css/main.css" />
<link
rel="preload"
href="static/fonts/inter/Inter-roman.var.woff2?v=3.19"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="static/fonts/remix/remixicon.woff2?t=1678097420828"
as="font"
type="font/woff2"
crossorigin />
</head> </head>
<body> <body>
<nav> <nav>

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

@ -1,6 +1,3 @@
@import "../fonts/inter/inter.css";
@import "../fonts/remix/remixicon.css";
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
font-style: inherit; font-style: inherit;
@ -30,7 +27,7 @@
} }
body { body {
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif; font-family: "Inter var", "Inter", sans-serif;
color: var(--text); color: var(--text);
margin: auto; margin: auto;
margin-top: var(--navh); margin-top: var(--navh);

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

Binary file not shown.

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

@ -15,33 +15,3 @@ Usage:
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
} }
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.19") 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: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("Inter.var.woff2?v=3.19") format("woff2");
}