Skip to content

Commit 3389296

Browse files
navin-moorthynavin-moorthy
committed
style(styles): 💄 enhance font settings and cleanup
1 parent 0a5a01a commit 3389296

9 files changed

+101
-3
lines changed

‎pages/_document.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ class MyDocument extends Document {
55
render() {
66
return (
77
<Html>
8-
<Head>
9-
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
10-
</Head>
8+
<Head />
119
<body>
1210
<SkipNavLink />
1311
<Main />

‎public/fonts/Inter.var-english.woff2‎

55.1 KB
Binary file not shown.

‎public/fonts/Inter.var-latin-extended-a.woff2‎

20.8 KB
Binary file not shown.

‎public/fonts/Inter.var-latin-extended-additional.woff2‎

30.1 KB
Binary file not shown.

‎public/fonts/Inter.var-latin-extended-b.woff2‎

45.4 KB
Binary file not shown.

‎public/fonts/Inter.var-rest-latin.woff2‎

22 KB
Binary file not shown.

‎public/fonts/Inter.var-rest.woff2‎

96.3 KB
Binary file not shown.

‎styles/nextra.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,104 @@
1+
/**
2+
* Reduce CLS using adjusted system font fallback
3+
* https://screenspan.net/fallback
4+
* CLI - https://github.com/pixel-point/fontpie
5+
*/
6+
7+
/* Fallback for Inter */
8+
@font-face {
9+
font-family: "Adjusted Arial Fallback";
10+
src: local(arial);
11+
ascent-override: 94%;
12+
descent-override: normal;
13+
line-gap-override: 9%;
14+
15+
size-adjust: 98%;
16+
}
17+
18+
/**
19+
* Explore what a font file contains
20+
* https://wakamaifondue.com/beta/ & https://variable-type-tools.appspot.com/
21+
*
22+
* Optimization & creating subset using
23+
* https://markoskon.com/creating-font-subsets/#multiple-subsets-by-script
24+
*
25+
* Extra learning
26+
* https://joyofcode.xyz/using-fonts-on-the-web#variable-fonts-are-the-future-of-fonts
27+
*/
28+
29+
/* All the rest of the characters */
30+
31+
/* TODO: Use the v4 Inter font */
32+
@font-face {
33+
font-family: InterVar;
34+
font-weight: 100 900;
35+
font-style: normal;
36+
font-display: swap;
37+
src: url("/fonts/Inter.var-rest.woff2") format("woff2");
38+
unicode-range:
39+
/* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */ U+0259,
40+
U+0300-03C0, U+2070-2073, U+2075-20AB, \u+20ad-2121, U+2123-218F,
41+
U+21BC-2211, U+2213-2214, U+2216-F8FE, \u+fb01-fb02;
42+
}
43+
44+
@font-face {
45+
font-family: InterVar;
46+
font-weight: 100 900;
47+
font-style: normal;
48+
font-display: swap;
49+
src: url("/fonts/Inter.var-latin-extended-additional.woff2") format("woff2");
50+
unicode-range: U+1E00-1EFF;
51+
}
52+
53+
/* Latin b glyph */
54+
@font-face {
55+
font-family: InterVar;
56+
font-weight: 100 900;
57+
font-style: normal;
58+
font-display: swap;
59+
src: url("/fonts/Inter.var-extended-b.woff2") format("woff2");
60+
unicode-range: U+0180-024F;
61+
}
62+
63+
/* Latin a glyph */
64+
@font-face {
65+
font-family: InterVar;
66+
font-weight: 100 900;
67+
font-style: normal;
68+
font-display: swap;
69+
src: url("/fonts/Inter.var-latin-extended-a.woff2") format("woff2");
70+
unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
71+
}
72+
73+
/* Rest of the latin removing the English subset */
74+
@font-face {
75+
font-family: InterVar;
76+
font-weight: 100 900;
77+
font-style: normal;
78+
font-display: swap;
79+
src: url("/fonts/Inter.var-rest-latin.woff2") format("woff2");
80+
unicode-range: U+00A1, U+00AA-00AB, U+00AF, U+00B8, U+00BB, U+00BF-00D6,
81+
U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02B0-02FF;
82+
}
83+
84+
/* Place the English subset last */
85+
@font-face {
86+
font-family: InterVar;
87+
font-weight: 100 900;
88+
font-style: normal;
89+
font-display: swap;
90+
src: url("/fonts/Inter.var-english.woff2") format("woff2");
91+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
92+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
93+
U+FEFF, U+FFFD;
94+
}
95+
196
@tailwind base;
297

398
html {
499
@apply antialiased;
5100
font-size: 16px;
101+
font-variation-settings: "opsz" 32;
6102
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "ss06" 1;
7103
-webkit-tap-highlight-color: transparent;
8104
}

‎tailwind.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,16 @@ module.exports = {
2727
content: [
2828
"./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
2929
"./components/**/*.{js,ts,jsx,tsx,md,mdx}",
30+
"./theme.config.js",
3031
"node_modules/@adaptui/react-tailwind/**/*",
3132
"node_modules/nextra-theme-docs/dist**/*",
3233
],
3334
darkMode: "class",
3435
theme: {
3536
extend: {
37+
fontFamily: {
38+
sans: ["InterVar", "Adjusted Arial Fallback", "serif"],
39+
},
3640
colors: {
3741
dark: "#111",
3842
"theme-black": "#000",

0 commit comments

Comments
 (0)