feat: use Inter font for heading and body

I hope I read the PenPot design correctly here.
Right now, I hotlink as documented by the font forge. We might want to
self-host down the road.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-03-01 12:40:09 +01:00
parent dd50af1764
commit cfb58fa9c7
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
3 changed files with 17 additions and 2 deletions

View file

@ -4,7 +4,9 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="preconnect" href="https://rsms.me/" />
%sveltekit.head% %sveltekit.head%
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton"> <body data-sveltekit-preload-data="hover" data-theme="skeleton">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>

View file

@ -8,3 +8,16 @@ html,
body { body {
@apply h-full overflow-hidden; @apply h-full overflow-hidden;
} }
:root {
font-family: Inter, sans-serif;
font-feature-settings:
'liga' 1,
'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}

View file

@ -1,7 +1,7 @@
:root { :root {
/* =~= Theme Properties =~= */ /* =~= Theme Properties =~= */
--theme-font-family-base: system-ui; --theme-font-family-base: InterVariable, Inter, sans-serif, system-ui;
--theme-font-family-heading: system-ui; --theme-font-family-heading: InterVariable, Inter, sans-serif, system-ui;
--theme-font-color-base: 0 0 0; --theme-font-color-base: 0 0 0;
--theme-font-color-dark: 255 255 255; --theme-font-color-dark: 255 255 255;
--theme-rounded-base: 4px; --theme-rounded-base: 4px;