Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Remove font loading from the library; let apps load their own fonts

未关闭
#855 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
74/100
Issue 类型
重构
描述清晰度
描述清楚
活跃度
冷清
技术栈
css, next.js, react, vite

调研方向

从 packages/raystack/styles/typography.css 开始,确认必须保留的 --rs-font-* 变量。然后找到 issue 中提到的项目 README 或文档,以及 Changelog/Release Notes 的入口,并检查现有针对 Vite 和 Next.js 的 package 指南。完成的标准是:移除字体导入,使用指南涵盖两种应用类型,注明可选的传统风格字体,并记录 breaking change 的迁移方案。

由索引模型根据 Issue 内容生成。

描述

BREAKING CHANGE enhancement global

Summary

The library loads fonts itself. packages/raystack/styles/typography.css starts with four Google Fonts @import calls:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@0;1&display=swap");

A component library should not decide how or where fonts load. That belongs to the app. We should remove these imports and keep only the --rs-font-* variables (the font-family names), then let each app load the fonts it needs.

Why this is a problem

  • Consumers download fonts they never use. Any app that pulls in Apsara fetches Inter, Lora, Josefin Sans, and JetBrains Mono — even if it only uses Inter. Lora and Josefin Sans only apply under [data-style="traditional"], so most apps pay for them for nothing.
  • @import blocks render. Fonts inside a CSS @import are found late by the browser, which delays paint and causes a flash of unstyled text (FOUT).
  • Extra connections. Each @import needs DNS + TLS to Google's domains before the font even downloads.
  • No control for the app. The app can't preload the font, can't set font-display, and can't self-host. All of that is decided inside the library.
  • Blocks other improvements. We can't cleanly add a 600 weight or use Inter's optical-sizing (opsz) axis, because the library pins the exact Google Fonts URL and weights.

Proposal

  1. Remove the four @import lines from packages/raystack/styles/typography.css.
  2. Keep the --rs-font-* variables (Inter, Lora, Josefin Sans, JetBrains Mono, Menlo) so component styles stay unchanged.
  3. Document how consuming apps load the fonts, for example:
    • Self-host with Fontsource — @fontsource-variable/inter (variable font, all weights from one file).
    • next/font for Next.js apps.
    • A plain @font-face or Google Fonts <link> for apps that want it.
  4. Note the optional families (Lora, Josefin Sans) are only needed for the traditional style.

Breaking change

This is a breaking change. Apps that rely on Apsara loading fonts will render in a fallback font until they load the fonts themselves. The migration is small — install the fonts and import them once at the app entry — but it must be called out in release notes with a clear before/after.

Acceptance criteria

  • No @import of font files in the library CSS.
  • --rs-font-* variables still present; components render identically once the app loads Inter.
  • Docs / README show how to load fonts in a plain Vite app and a Next.js app.
  • Migration note added to the changelog / release notes.
主要语言
TypeScript
星标
70
派生
13
平均合并
4 天 6 小时
30 天内合并 PR
10

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

raystack/apsara 的其他 Issue

查看 raystack/apsara 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。