diff --git a/docs/public/fonts/paper-mono.woff2 b/docs/public/fonts/paper-mono.woff2 new file mode 100644 index 00000000000..7c5e37807ed Binary files /dev/null and b/docs/public/fonts/paper-mono.woff2 differ diff --git a/docs/src/app/(docs)/layout.tsx b/docs/src/app/(docs)/layout.tsx index b9eaeac9cfa..1a7c2634eac 100644 --- a/docs/src/app/(docs)/layout.tsx +++ b/docs/src/app/(docs)/layout.tsx @@ -38,6 +38,13 @@ export default function Layout({ children }: React.PropsWithChildren) { type="font/woff2" crossOrigin="anonymous" /> + diff --git a/docs/src/components/Code.css b/docs/src/components/Code.css index f4546545c0e..5aa381f1487 100644 --- a/docs/src/components/Code.css +++ b/docs/src/components/Code.css @@ -2,6 +2,12 @@ .Code { letter-spacing: normal; + p &[data-inline] { + letter-spacing: -0.01em; + word-spacing: -0.2em; + line-height: normal; + } + /* In a code block */ pre & { white-space: normal; diff --git a/docs/src/css/fonts/index.css b/docs/src/css/fonts/index.css index ff3df7cd8fd..857237baca2 100644 --- a/docs/src/css/fonts/index.css +++ b/docs/src/css/fonts/index.css @@ -23,81 +23,19 @@ } @font-face { - font-family: 'SF Mono'; + font-family: 'Paper Mono'; font-weight: normal; - src: local('SFMono-Regular'), local('ui-monospace'); - /* Match 14px Unica to 13.25px SF Mono */ - size-adjust: calc(100% * 13.25 / 14); -} - -@font-face { - font-family: 'SF Mono'; - font-weight: bold; - src: local('SFMono-Bold'), local('ui-monospace'); - /* Match 14px Unica to 13.25px SF Mono */ - size-adjust: calc(100% * 13.25 / 14); -} - -@font-face { - font-family: Menlo; - font-weight: normal; - src: local('Menlo-Regular'); - /* Match other monospace fonts to SF Mono in width */ - size-adjust: calc(100% * 13.5 / 14); - ascent-override: 95%; -} - -@font-face { - font-family: Menlo; - font-weight: bold; - src: local('Menlo-Bold'); - /* Match other monospace fonts to SF Mono in width */ - size-adjust: calc(100% * 13.5 / 14); - ascent-override: 95%; -} - -@font-face { - font-family: Consolas; - font-weight: normal; - src: local('Consolas'); - /* Match other monospace fonts to SF Mono in width */ - size-adjust: calc(100% * 14.75 / 14); - ascent-override: 85%; -} - -@font-face { - font-family: Consolas; - font-weight: bold; - src: local('Consolas-Bold'); - /* Match other monospace fonts to SF Mono in width */ - size-adjust: calc(100% * 14.75 / 14); - ascent-override: 85%; -} - -@font-face { - font-family: 'DejaVu Sans Mono'; - font-weight: normal; - src: local('DejaVuSansMono'); + src: url('/fonts/paper-mono.woff2') format('woff2'); + font-variation-settings: 'wght' 415; + /* Reduce the size to balance with the sans-serif fonts */ size-adjust: calc(100% * 13.5 / 14); } @font-face { - font-family: 'DejaVu Sans Mono'; + font-family: 'Paper Mono'; font-weight: bold; - src: local('DejaVuSansMono-Bold'); + src: url('/fonts/paper-mono.woff2') format('woff2'); + font-variation-settings: 'wght' 650; + /* Reduce the size to balance with the sans-serif fonts */ size-adjust: calc(100% * 13.5 / 14); } - -@font-face { - font-family: Inconsolata; - font-weight: normal; - src: local('Inconsolata-Regular'); - size-adjust: calc(100% * 15.75 / 14); -} - -@font-face { - font-family: Inconsolata; - font-weight: bold; - src: local('Inconsolata-Bold'); - size-adjust: calc(100% * 15.75 / 14); -} diff --git a/docs/src/css/index.css b/docs/src/css/index.css index 319dd59fc10..4a0bff3b37a 100644 --- a/docs/src/css/index.css +++ b/docs/src/css/index.css @@ -102,7 +102,7 @@ --color-red-800: var(--color-red); /* Typography */ - --font-mono: 'SF Mono', 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Inconsolata', monospace; + --font-mono: 'Paper Mono', monospace; --font-sans: 'Die Grotesk A', system-ui, sans-serif; --font-sans-b: 'Die Grotesk B', system-ui, sans-serif; --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif; diff --git a/docs/src/css/theme-redesign.css b/docs/src/css/theme-redesign.css index d6d88c8c4c0..9dbfe03119d 100644 --- a/docs/src/css/theme-redesign.css +++ b/docs/src/css/theme-redesign.css @@ -9,8 +9,7 @@ --font-sans-b: 'die grotesk b', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', arial, sans-serif; - --font-mono: - 'Söhne Mono', 'SF Mono', Menlo, 'DejaVu Sans Mono', Consolas, Inconsolata, monospace; + --font-mono: 'Paper Mono', monospace; --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif; /* Font size */