engineering blog at https://blog.tangled.org
update fonts
+69
-117
+22
-11
flake.lock
+22
-11
flake.lock
···
1
1
{
2
2
"nodes": {
3
-
"ia-fonts-src": {
3
+
"ibm-plex-mono-src": {
4
4
"flake": false,
5
5
"locked": {
6
-
"lastModified": 1686932517,
7
-
"narHash": "sha256-2T165nFfCzO65/PIHauJA//S+zug5nUwPcg8NUEydfc=",
8
-
"owner": "iaolo",
9
-
"repo": "iA-Fonts",
10
-
"rev": "f32c04c3058a75d7ce28919ce70fe8800817491b",
11
-
"type": "github"
6
+
"lastModified": 1731402384,
7
+
"narHash": "sha256-OwUmrPfEehLDz0fl2ChYLK8FQM2p0G1+EMrGsYEq+6g=",
8
+
"type": "tarball",
9
+
"url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip"
12
10
},
13
11
"original": {
14
-
"owner": "iaolo",
15
-
"repo": "iA-Fonts",
16
-
"type": "github"
12
+
"type": "tarball",
13
+
"url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip"
14
+
}
15
+
},
16
+
"inter-fonts-src": {
17
+
"flake": false,
18
+
"locked": {
19
+
"lastModified": 1731680160,
20
+
"narHash": "sha256-5vdKKvHAeZi6igrfpbOdhZlDX2/5+UvzlnCQV6DdqoQ=",
21
+
"type": "tarball",
22
+
"url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip"
23
+
},
24
+
"original": {
25
+
"type": "tarball",
26
+
"url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip"
17
27
}
18
28
},
19
29
"nixpkgs": {
···
48
58
},
49
59
"root": {
50
60
"inputs": {
51
-
"ia-fonts-src": "ia-fonts-src",
61
+
"ibm-plex-mono-src": "ibm-plex-mono-src",
62
+
"inter-fonts-src": "inter-fonts-src",
52
63
"nixpkgs": "nixpkgs",
53
64
"vite": "vite"
54
65
}
+11
-5
flake.nix
+11
-5
flake.nix
···
4
4
inputs = {
5
5
nixpkgs.url = "github:nixos/nixpkgs";
6
6
vite.url = "github:icyphox/go-vite";
7
-
ia-fonts-src = {
8
-
url = "github:iaolo/iA-Fonts";
7
+
inter-fonts-src = {
8
+
url = "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip";
9
+
flake = false;
10
+
};
11
+
ibm-plex-mono-src = {
12
+
url = "https://github.com/IBM/plex/releases/download/%40ibm%2Fplex-mono%401.1.0/ibm-plex-mono.zip";
9
13
flake = false;
10
14
};
11
15
};
···
14
18
{ self
15
19
, nixpkgs
16
20
, vite
17
-
, ia-fonts-src
21
+
, inter-fonts-src
22
+
, ibm-plex-mono-src
18
23
}:
19
24
let
20
25
supportedSystems = [
···
42
47
pkgs.tailwindcss
43
48
];
44
49
shellHook = ''
45
-
cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf static/fonts/
46
-
cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf static/fonts/
50
+
cp -f ${inter-fonts-src}/web/InterVariable*.woff2 static/fonts/
51
+
cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 static/fonts/
52
+
cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono-Regular.woff2 static/fonts/
47
53
'';
48
54
};
49
55
}
+32
-99
input.css
+32
-99
input.css
···
2
2
@tailwind components;
3
3
@tailwind utilities;
4
4
@layer base {
5
-
@font-face {
6
-
font-family: "iA Writer Quattro S";
7
-
src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
8
-
format("truetype");
9
-
font-weight: normal;
10
-
font-style: normal;
11
-
font-display: swap;
12
-
font-feature-settings:
13
-
"calt" 1,
14
-
"kern" 1;
15
-
}
16
-
@font-face {
17
-
font-family: "iA Writer Quattro S";
18
-
src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
19
-
font-weight: bold;
20
-
font-style: normal;
21
-
font-display: swap;
22
-
font-feature-settings:
23
-
"calt" 1,
24
-
"kern" 1;
25
-
}
26
-
@font-face {
27
-
font-family: "iA Writer Quattro S";
28
-
src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
29
-
font-weight: normal;
30
-
font-style: italic;
31
-
font-display: swap;
32
-
font-feature-settings:
33
-
"calt" 1,
34
-
"kern" 1;
35
-
}
36
-
@font-face {
37
-
font-family: "iA Writer Quattro S";
38
-
src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
39
-
format("truetype");
40
-
font-weight: bold;
41
-
font-style: italic;
42
-
font-display: swap;
43
-
font-feature-settings:
44
-
"calt" 1,
45
-
"kern" 1;
46
-
}
5
+
@font-face {
6
+
font-family: "InterVariable";
7
+
src: url("/static/fonts/InterVariable.woff2") format("woff2");
8
+
font-weight: normal;
9
+
font-style: normal;
10
+
font-display: swap;
11
+
}
12
+
13
+
@font-face {
14
+
font-family: "InterVariable";
15
+
src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16
+
font-weight: normal;
17
+
font-style: italic;
18
+
font-display: swap;
19
+
}
20
+
21
+
@font-face {
22
+
font-family: "InterDisplay";
23
+
src: url("/static/fonts/InterDisplay-Regular.woff2") format("woff2");
24
+
font-weight: normal;
25
+
font-style: normal;
26
+
font-display: swap;
27
+
}
47
28
48
-
@font-face {
49
-
font-family: "iA Writer Mono S";
50
-
src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
51
-
font-weight: normal;
52
-
font-style: normal;
53
-
font-display: swap;
54
-
font-feature-settings:
55
-
"calt" 1,
56
-
"kern" 1;
57
-
}
58
-
@font-face {
59
-
font-family: "iA Writer Mono S";
60
-
src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
61
-
font-weight: bold;
62
-
font-style: normal;
63
-
font-display: swap;
64
-
font-feature-settings:
65
-
"calt" 1,
66
-
"kern" 1;
67
-
}
68
-
@font-face {
69
-
font-family: "iA Writer Mono S";
70
-
src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
71
-
font-weight: normal;
72
-
font-style: italic;
73
-
font-display: swap;
74
-
font-feature-settings:
75
-
"calt" 1,
76
-
"kern" 1;
77
-
}
78
-
@font-face {
79
-
font-family: "iA Writer Mono S";
80
-
src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
81
-
format("truetype");
82
-
font-weight: bold;
83
-
font-style: italic;
84
-
font-display: swap;
85
-
font-feature-settings:
86
-
"calt" 1,
87
-
"kern" 1;
88
-
}
29
+
@font-face {
30
+
font-family: "IBMPlexMono";
31
+
src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
32
+
font-weight: normal;
33
+
font-style: italic;
34
+
font-display: swap;
35
+
}
89
36
90
-
@font-face {
91
-
font-family: "Inter";
92
-
font-style: normal;
93
-
font-weight: 400;
94
-
font-display: swap;
95
-
font-feature-settings:
96
-
"calt" 1,
97
-
"kern" 1;
98
-
}
99
-
h1 {
37
+
h1, h2, h3 {
100
38
@apply text-2xl;
101
-
@apply font-sans;
39
+
@apply font-display;
102
40
@apply text-black;
103
41
@apply font-bold;
104
42
}
···
107
45
@apply bg-yellow-400;
108
46
@apply text-black;
109
47
@apply bg-opacity-30;
110
-
}
111
-
112
-
html {
113
-
letter-spacing: -0.01em;
114
-
word-spacing: -0.07em;
115
48
}
116
49
117
50
@layer base {
+3
-2
tailwind.config.js
+3
-2
tailwind.config.js
···
15
15
},
16
16
extend: {
17
17
fontFamily: {
18
-
sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
19
-
mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
18
+
display: ["InterDisplay", "system-ui", "sans-serif", "ui-sans-serif"],
19
+
sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
20
+
mono: ["IBMPlexMono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
20
21
},
21
22
maxWidth: {
22
23
'prose': '65ch',