my personal site
Refactor index.html and style.css: Replace Google Fonts with local font files for improved performance, and update font-family variable to use "Mozilla Text" for better consistency across the site.
+51
-4
+20
_headers
+20
_headers
···
1
+
# Cloudflare Pages headers
2
+
# https://developers.cloudflare.com/pages/configuration/headers/
3
+
4
+
# Enable Early Hints for the homepage
5
+
/
6
+
Link: </fonts/mozilla-text-400.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin
7
+
Link: </fonts/mozilla-text-500.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin
8
+
Link: </fonts/mozilla-text-600.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin
9
+
Link: </style.css>; rel=preload; as=style
10
+
11
+
# Cache fonts aggressively (1 year, immutable)
12
+
/fonts/*
13
+
Cache-Control: public, max-age=31536000, immutable
14
+
15
+
# Cache static assets
16
+
/*.css
17
+
Cache-Control: public, max-age=86400
18
+
19
+
/*.jpg
20
+
Cache-Control: public, max-age=31536000, immutable
fonts/mozilla-text-400.woff2
fonts/mozilla-text-400.woff2
This is a binary file and will not be displayed.
fonts/mozilla-text-500.woff2
fonts/mozilla-text-500.woff2
This is a binary file and will not be displayed.
fonts/mozilla-text-600.woff2
fonts/mozilla-text-600.woff2
This is a binary file and will not be displayed.
+2
images/vt-logo.svg
+2
images/vt-logo.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="98.188" viewBox="0 0 206.1925 98.1875" width="206.19" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/"><g transform="matrix(1.25 0 0 -1.25 -127.51 602.7)"><g transform="translate(.77443 .77443)"><path d="m108.14 476.89h20.034l14.814-27.544 15.446 27.544h100.79l-9.184-17.112h-27.752l-27.547-51.75h-20.24l27.751 51.54h-32.97l-26.082-48.203-35.06 65.525z" fill="#000" stroke="#fff" stroke-width="8"/></g></g></svg>
+3
-3
index.html
+3
-3
index.html
···
6
6
<meta name="color-scheme" content="light dark">
7
7
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
8
8
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
9
-
<link rel="preconnect" href="https://fonts.googleapis.com">
10
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
-
<link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
9
+
<link rel="preload" href="fonts/mozilla-text-400.woff2" as="font" type="font/woff2" crossorigin>
10
+
<link rel="preload" href="fonts/mozilla-text-500.woff2" as="font" type="font/woff2" crossorigin>
11
+
<link rel="preload" href="fonts/mozilla-text-600.woff2" as="font" type="font/woff2" crossorigin>
12
12
<link rel="stylesheet" href="style.css">
13
13
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
14
14
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+26
-1
style.css
+26
-1
style.css
···
18
18
list-style: none;
19
19
}
20
20
21
+
/* Fonts */
22
+
@font-face {
23
+
font-family: "Mozilla Text";
24
+
font-style: normal;
25
+
font-weight: 400;
26
+
font-display: swap;
27
+
src: url("fonts/mozilla-text-400.woff2") format("woff2");
28
+
}
29
+
30
+
@font-face {
31
+
font-family: "Mozilla Text";
32
+
font-style: normal;
33
+
font-weight: 500;
34
+
font-display: swap;
35
+
src: url("fonts/mozilla-text-500.woff2") format("woff2");
36
+
}
37
+
38
+
@font-face {
39
+
font-family: "Mozilla Text";
40
+
font-style: normal;
41
+
font-weight: 600;
42
+
font-display: swap;
43
+
src: url("fonts/mozilla-text-600.woff2") format("woff2");
44
+
}
45
+
21
46
/* Custom Properties */
22
47
:root {
23
-
--font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
48
+
--font-sans: "Mozilla Text", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
24
49
--color-bg: oklch(100% 0.003 250);
25
50
--color-border: oklch(93% 0.007 250);
26
51
--color-text: oklch(30% 0.028 250);