Skip to content

perf: self-host fonts and eliminate render-blocking Typekit request #37

Description

@KotaHusky

Summary

The homepage loads fonts via an external Typekit (use.typekit.net/vxp7yul.css) stylesheet, which is a render-blocking request that Lighthouse flags as a performance issue. Additionally, FontAwesome icons are loaded from a kit CDN (kit.fontawesome.com). Both of these are third-party network dependencies that add latency on every page load and create single points of failure.

Current State

In app/layout.tsx:

<link rel="stylesheet" href="https://use.typekit.net/vxp7yul.css" precedence="default" />
<Script id="fontawesome" src="https://kit.fontawesome.com/cea9781086.js" ... />

Proposed Changes

1. Replace Typekit with next/font

  • Use next/font/google or next/font/local to load the equivalent font (or swap to a close match available on Google Fonts)
  • next/font automatically self-hosts, applies font-display: swap, and is zero render-blocking
  • Eliminates the Typekit dependency entirely

2. Replace FontAwesome kit with @fortawesome/react-fontawesome

  • Install @fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome
  • Import only the specific icons used (GitHub, PyPI, Bluesky, Telegram) — tree-shakeable SVGs, no CDN request
  • Removes the <Script> CDN tag from the layout entirely

Expected Impact

  • Removes 2 render-blocking/external network requests per page load
  • Reduces Cumulative Layout Shift (CLS) from font FOUT
  • Page works correctly even when Typekit or FontAwesome CDN is unreachable (relevant for container deployments behind Cloudflare)
  • Smaller JavaScript bundle (only the icons actually used, not the entire FA kit)

Acceptance Criteria

  • next/font is used for body font; Typekit <link> is removed from layout
  • FontAwesome CDN <Script> is removed from layout
  • SocialIcon and TelegramModal use @fortawesome/react-fontawesome SVG components
  • All icon sizes and hover styles are visually equivalent to current behavior
  • Lighthouse performance score does not decrease (ideally improves)
  • All existing tests pass

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestperformancePerformance improvement

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions