Use Geist font in Dev Overlay #74160

devjiwonchoi · 2024-12-19T21:19:37Z

This PR added Geist font to be used in Dev Overlay.

Closes NDX-572

devjiwonchoi · 2024-12-19T21:19:53Z

Use Geist font in Dev Overlay #74160 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2024-12-19T21:26:12Z

Tests Passed

ijjk · 2024-12-19T21:28:23Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
buildDuration	24.3s	22.2s	N/A
buildDurationCached	20.5s	18.1s	N/A
nodeModulesSize	416 MB	416 MB	⚠️ +3.51 kB
nextStartRea..uration (ms)	574ms	564ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
1187-HASH.js gzip	52.4 kB	52.4 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.36 kB	5.36 kB	N/A
bccd1874-HASH.js gzip	52.8 kB	52.8 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.49 kB	4.49 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
_buildManifest.js gzip	749 B	746 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
index.html gzip	522 B	524 B	N/A
link.html gzip	537 B	537 B	✓
withRouter.html gzip	518 B	520 B	N/A
Overall change	537 B	537 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
middleware-b..fest.js gzip	670 B	664 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	359 kB	359 kB	N/A
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	137 kB	137 kB	✓
app-page.run...dev.js gzip	348 kB	348 kB	N/A
app-page.run..prod.js gzip	125 kB	125 kB	✓
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.73 MB	1.73 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 12-20-use_geist_font_in_dev_overlay	Change
0.pack gzip	2.08 MB	2.08 MB	⚠️ +1.53 kB
index.pack gzip	73.9 kB	73.6 kB	N/A
Overall change	2.08 MB	2.08 MB	⚠️ +1.53 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: c1b0f10

ijjk · 2024-12-19T21:50:28Z

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx

@@ -35,9 +35,10 @@ export function Base() {
          --color-text-color-red-1: #ff5555;
          --color-text-background-red-1: #fff9f9;

-          --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',
+          --font-stack-monospace: 'Geist Mono', Consolas, 'Liberation Mono',


Where are we initializing the font so it's available here in the overlay?

Good catch, thanks! 🙏

gaojude · 2024-12-20T18:41:20Z

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx

+        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');
+


non-blocking nit: ideally, this can be bundled in so we dont need to download from google

Maybe we could pre-download it in the taskfile so it's still updated whenever we do a release

Will revisit to use local woff2 later!

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Dec 19, 2024

devjiwonchoi marked this pull request as ready for review December 19, 2024 21:30

devjiwonchoi requested review from ijjk and gaojude December 19, 2024 21:32

ijjk reviewed Dec 19, 2024

View reviewed changes

devjiwonchoi added 2 commits December 20, 2024 12:13

Use Geist font in Dev Overlay

569643e

import Geist Google Font

c1b0f10

devjiwonchoi force-pushed the 12-20-use_geist_font_in_dev_overlay branch from d001ed3 to c1b0f10 Compare December 20, 2024 15:17

devjiwonchoi requested a review from ijjk December 20, 2024 15:20

ijjk approved these changes Dec 20, 2024

View reviewed changes

gaojude reviewed Dec 20, 2024

View reviewed changes

devjiwonchoi merged commit eff54a3 into canary Dec 20, 2024
131 checks passed

devjiwonchoi deleted the 12-20-use_geist_font_in_dev_overlay branch December 20, 2024 20:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Geist font in Dev Overlay #74160

Use Geist font in Dev Overlay #74160

devjiwonchoi commented Dec 19, 2024 •

edited

Loading

devjiwonchoi commented Dec 19, 2024

ijjk commented Dec 19, 2024 •

edited

Loading

ijjk commented Dec 19, 2024 •

edited

Loading

ijjk Dec 19, 2024

devjiwonchoi Dec 20, 2024

gaojude Dec 20, 2024

ijjk Dec 20, 2024

devjiwonchoi Dec 20, 2024

		@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');

Use Geist font in Dev Overlay #74160

Use Geist font in Dev Overlay #74160

Conversation

devjiwonchoi commented Dec 19, 2024 • edited Loading

devjiwonchoi commented Dec 19, 2024

ijjk commented Dec 19, 2024 • edited Loading

Tests Passed

ijjk commented Dec 19, 2024 • edited Loading

Stats from current PR

ijjk Dec 19, 2024

Choose a reason for hiding this comment

devjiwonchoi Dec 20, 2024

Choose a reason for hiding this comment

gaojude Dec 20, 2024

Choose a reason for hiding this comment

ijjk Dec 20, 2024

Choose a reason for hiding this comment

devjiwonchoi Dec 20, 2024

Choose a reason for hiding this comment

devjiwonchoi commented Dec 19, 2024 •

edited

Loading

ijjk commented Dec 19, 2024 •

edited

Loading

ijjk commented Dec 19, 2024 •

edited

Loading