geist-svelte

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Geist Svelte

Use this skill for integrating Geist fonts into Svelte and SvelteKit apps. Focus on app integration patterns, not library maintenance.

本技能用于在Svelte和SvelteKit应用中集成Geist字体。重点关注应用集成模式，而非库的维护。

When to Use This Skill

何时使用本技能

Use this skill when the user:

Asks to add Geist fonts in a Svelte or SvelteKit project.
Mentions Geist Sans, Geist Mono, or Geist Pixel variants.
Needs help importing
```
geist-svelte/font/*
```
in root app/layout files.
Wants Tailwind v4 (
```
@theme
```
) or Tailwind v3 (
```
theme.extend.fontFamily
```
) setup for Geist variables.
Wants to apply Geist fonts without Tailwind using
```
var(--font-geist-*)
```
.
Needs troubleshooting for fonts not loading or not applying.
Wants to migrate from manual/local
```
@font-face
```
Geist setup to
```
geist-svelte
```
.

当用户有以下需求时，可使用本技能：

要求在Svelte或SvelteKit项目中添加Geist字体
提及Geist Sans、Geist Mono或Geist Pixel字体变体
需要帮助在根应用/布局文件中导入
```
geist-svelte/font/*
```
希望为Geist变量配置Tailwind v4（
```
@theme
```
）或Tailwind v3（
```
theme.extend.fontFamily
```
）
希望不使用Tailwind，通过
```
var(--font-geist-*)
```
来应用Geist字体
需要解决字体未加载或未生效的问题
想要从手动/本地
```
@font-face
```
的Geist字体设置迁移到
```
geist-svelte
```

Workflow

操作流程

Identify runtime and styling path.

SvelteKit or Svelte (Vite).
Tailwind v4, Tailwind v3, or no Tailwind.
Decide whether the user needs Sans/Mono only or Pixel variants too.

Install and import fonts at app entry/root.

Install with package manager:
```
pnpm add geist-svelte
```
(or
```
npm i
```
/
```
yarn add
```
).
Import font modules as side effects in the root layout/bootstrap file.
Keep imports in root entry so CSS variables are registered globally.

Map variables to the app styling system.

Tailwind v4: map in
```
@theme inline
```
in global CSS.
Tailwind v3: map in
```
theme.extend.fontFamily
```
.
No Tailwind: use
```
var(--font-geist-*)
```
in global CSS rules.

Apply fonts intentionally.

Use
```
font-sans
```
/
```
font-mono
```
(Tailwind) or explicit CSS
```
font-family
```
.
For Pixel, use specific variables (
```
--font-geist-pixel-*
```
) for display-only UI text.
Use named imports only when metadata (
```
.variable
```
,
```
.style.fontFamily
```
) is needed.

Troubleshoot quickly.

Verify root side-effect imports exist and load before UI render.
Verify Tailwind theme mapping matches the CSS variable names.
If lint flags unused imports, use side-effect import style (
```
import 'geist-svelte/font/sans'
```
).

确定运行环境和样式方案

SvelteKit或Svelte（Vite）
Tailwind v4、Tailwind v3或不使用Tailwind
判断用户是否只需要Sans/Mono变体，还是也需要Pixel变体

使用包管理器安装：
```
pnpm add geist-svelte
```
（或
```
npm i
```
/
```
yarn add
```
）
在根布局/引导文件中以副作用方式导入字体模块
将导入语句放在根入口文件中，确保CSS变量全局注册

将变量映射到应用样式系统

Tailwind v4：在全局CSS的
```
@theme inline
```
中进行映射
Tailwind v3：在
```
theme.extend.fontFamily
```
中进行映射
不使用Tailwind：在全局CSS规则中使用
```
var(--font-geist-*)
```

按需应用字体

使用
```
font-sans
```
/
```
font-mono
```
（Tailwind）或显式的CSS
```
font-family
```
对于Pixel变体，使用特定变量（
```
--font-geist-pixel-*
```
）仅用于展示类UI文本
仅当需要元数据（
```
.variable
```
、
```
.style.fontFamily
```
）时，才使用命名导入

快速排查问题

确认根入口的副作用导入语句存在，且在UI渲染前加载
确认Tailwind主题映射与CSS变量名称一致
如果代码检查工具标记未使用的导入，请使用副作用导入方式（
```
import 'geist-svelte/font/sans'
```
）

Guardrails

注意事项

Do not suggest editing
```
node_modules
```
or
```
geist-svelte
```
package internals.
Do not use remote/CDN runtime imports for fonts when package imports are available.

Keep import paths to documented exports only:

```
geist-svelte/font/sans
```
```
geist-svelte/font/mono
```
```
geist-svelte/font/pixel
```
```
geist-svelte/font/sans-non-variable
```
```
geist-svelte/font/mono-non-variable
```

Prefer variable fonts first; use non-variable variants only for compatibility constraints.

请勿建议修改
```
node_modules
```
或
```
geist-svelte
```
包的内部文件
当可以通过包导入字体时，请勿使用远程/CDN运行时导入

仅使用文档中记录的导出路径：

```
geist-svelte/font/sans
```
```
geist-svelte/font/mono
```
```
geist-svelte/font/pixel
```
```
geist-svelte/font/sans-non-variable
```
```
geist-svelte/font/mono-non-variable
```

优先使用可变字体；仅在存在兼容性限制时，才使用非可变字体变体

References

参考资料

```
references/quickstart.md
```
```
references/usage-patterns.md
```
```
references/troubleshooting.md
```

```
references/quickstart.md
```
```
references/usage-patterns.md
```
```
references/troubleshooting.md
```