my website at ewancroft.uk
perf: self-host Inter variable font
Replace Google Fonts dependency with self-hosted Inter variable font files.
Benefits: improved privacy, faster loading, no external requests.
- Add InterVariable.woff2 and InterVariable-Italic.woff2
- Add @font-face rules in app.css
- Add preload hints in app.html
- Remove Google Fonts preconnect and stylesheet links
👾 Generated with [Letta Code](https://letta.com)
Co-Authored-By: Letta Code <noreply@letta.com>
+21
-7
+19
-1
src/app.css
+19
-1
src/app.css
···
1
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2
1
@import 'tailwindcss';
3
2
@import './lib/styles/themes.css';
3
+
4
+
/* Self-hosted Inter variable font */
5
+
@font-face {
6
+
font-family: 'Inter';
7
+
src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
8
+
url('/fonts/InterVariable.woff2') format('woff2');
9
+
font-weight: 100 900;
10
+
font-display: swap;
11
+
font-style: normal;
12
+
}
13
+
14
+
@font-face {
15
+
font-family: 'Inter';
16
+
src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
17
+
url('/fonts/InterVariable-Italic.woff2') format('woff2');
18
+
font-weight: 100 900;
19
+
font-display: swap;
20
+
font-style: italic;
21
+
}
4
22
5
23
@theme {
6
24
/* Font Family */
+2
-6
src/app.html
+2
-6
src/app.html
···
2
2
<html lang="en">
3
3
<head>
4
4
<link rel="stylesheet" href="/src/app.css" />
5
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
6
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7
-
<link
8
-
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
9
-
rel="stylesheet"
10
-
/>
5
+
<link rel="preload" href="/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
6
+
<link rel="preload" href="/fonts/InterVariable-Italic.woff2" as="font" type="font/woff2" crossorigin />
11
7
<meta charset="utf-8" />
12
8
<meta name="viewport" content="width=device-width, initial-scale=1" />
13
9
<meta name="theme-color" content="#10b981" />
static/fonts/InterVariable-Italic.woff2
static/fonts/InterVariable-Italic.woff2
This is a binary file and will not be displayed.
static/fonts/InterVariable.woff2
static/fonts/InterVariable.woff2
This is a binary file and will not be displayed.