ENG-9668: feat: add rx.google_font for faster font loading from the document head

[FarhanAliRaza]

Loading fonts via rx.App(stylesheets=...) chains them behind an @import in the global stylesheet, so the browser only discovers the font after parsing that sheet, delaying first paint. rx.google_font emits preconnect hints and a display=swap stylesheet link for head_components, letting the browser fetch the font during initial HTML parse. Also adds the as_ prop to el.link so rel="preload" links work.

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adhami3310]

this might make more sense in reflex-enterprise

[greptile-apps]

Greptile Summary

This PR introduces rx.google_font, a helper that emits preconnect hints and a display=swap stylesheet <link> in head_components so the browser discovers and fetches Google Fonts during the initial HTML parse rather than after the global stylesheet is downloaded. It also adds the as_ prop to el.Link, enabling rel="preload" font preloading.

• google_font in reflex/utils/misc.py: builds the correct Google Fonts v2 URL (handling spaces, weight sorting, and the ital,wght axis) and returns three Link components; registered as rx.google_font via the lazy-loader.
• as_ prop on el.Link: follows the existing trailing-underscore convention to expose the HTML as attribute needed for preload links; covered by a new unit test.
• Documentation: adds examples for rx.google_font, manual head_components usage with a third-party CDN, and local-font preloading.

Confidence Score: 3/5

Safe to merge after guarding against an empty weights sequence, which currently produces a malformed Google Fonts URL that silently loads no font.

The core logic for building the Google Fonts URL is correct and well-tested, but passing an empty weights list produces a structurally invalid URL (wght@ with nothing after it). The browser will silently fail to load the font with no Python-side error, which is surprising to callers. Aside from that, the as_ prop addition and the lazy-loader wiring look correct, and the test coverage is solid.

reflex/utils/misc.py — the google_font function needs a guard against empty weights

Important Files Changed

Filename	Overview
reflex/utils/misc.py	Adds google_font() utility that emits preconnect + stylesheet link components; silently produces a malformed Google Fonts URL when weights is empty
packages/reflex-components-core/src/reflex_components_core/el/elements/metadata.py	Adds as_ prop to Link element using the same field() pattern as other props; consistent with the framework's trailing-underscore convention for HTML reserved words
tests/units/utils/test_misc.py	New test file covering default weights, italic/space encoding, display override, and rx namespace export; assertions use list-membership checks consistent with the framework's render output format
tests/units/components/el/test_metadata.py	New test verifying that as_ renders as the as attribute in the Link component props
reflex/init.py	Adds google_font to the lazy-loader mapping under utils.misc, correctly exposing it as rx.google_font
docs/styling/custom-stylesheets.md	Documentation additions for rx.google_font, manual head_components usage, and preloading local fonts; examples are accurate

_{Reviews (1): Last reviewed commit: "feat: add rx.google_font for faster font..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 24 untouched benchmarks

---

_{Comparing FarhanAliRaza:pre-load-font (c49b0e5) with main (82f90c8)}