geist-svelte 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +68 -93
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # geist-svelte
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/geist-svelte)](https://www.npmjs.com/package/geist-svelte) [![license](https://img.shields.io/npm/l/geist-svelte)](https://www.npmjs.com/package/geist-svelte)
4
+
3
5
  [Geist font family](https://vercel.com/font) for Svelte and SvelteKit. Sans, Mono, and Pixel variants.
4
6
 
5
7
  ## Installation
@@ -8,37 +10,60 @@
8
10
  npm i geist-svelte
9
11
  ```
10
12
 
11
- ## Usage with SvelteKit
13
+ **Compatibility:** Svelte 4 / 5 · Tailwind v3 / v4 · SvelteKit · Svelte (Vite)
12
14
 
13
- `GeistSans` is exported from `geist-svelte/font/sans`, `GeistMono` from `geist-svelte/font/mono`, and Geist Pixel variants from `geist-svelte/font/pixel`.
15
+ ## Quickstart
14
16
 
15
- ### Basic Setup
17
+ Importing a font module registers the `@font-face` rules and CSS variables (for example `--font-geist-sans`).
16
18
 
17
- In your root `+layout.svelte`:
19
+ ### SvelteKit + Tailwind v4
18
20
 
19
21
  ```svelte
22
+ <!-- src/routes/+layout.svelte -->
20
23
  <script lang="ts">
21
- import { GeistSans } from 'geist-svelte/font/sans';
22
-
24
+ import '../app.css';
25
+ import 'geist-svelte/font/sans';
26
+ import 'geist-svelte/font/mono';
23
27
  let { children } = $props();
24
28
  </script>
25
29
 
26
30
  {@render children()}
31
+ ```
27
32
 
28
- <style>
29
- :global(body) {
30
- font-family: var(--font-geist-sans);
31
- }
32
- </style>
33
+ ```css
34
+ /* src/app.css */
35
+ @theme inline {
36
+ --font-sans: var(--font-geist-sans);
37
+ --font-mono: var(--font-geist-mono);
38
+ }
39
+ ```
40
+
41
+ ### Tailwind v3
42
+
43
+ Use the same font imports as above, then map variables in `tailwind.config.js`:
44
+
45
+ ```js
46
+ import { fontFamily } from 'tailwindcss/defaultTheme';
47
+
48
+ export default {
49
+ theme: {
50
+ extend: {
51
+ fontFamily: {
52
+ sans: ['var(--font-geist-sans)', ...fontFamily.sans],
53
+ mono: ['var(--font-geist-mono)', ...fontFamily.mono],
54
+ },
55
+ },
56
+ },
57
+ };
33
58
  ```
34
59
 
35
- ### Using Multiple Fonts
60
+ ### No Tailwind
36
61
 
37
62
  ```svelte
63
+ <!-- src/routes/+layout.svelte -->
38
64
  <script lang="ts">
39
- import { GeistSans } from 'geist-svelte/font/sans';
40
- import { GeistMono } from 'geist-svelte/font/mono';
41
-
65
+ import 'geist-svelte/font/sans';
66
+ import 'geist-svelte/font/mono';
42
67
  let { children } = $props();
43
68
  </script>
44
69
 
@@ -48,28 +73,22 @@ In your root `+layout.svelte`:
48
73
  :global(body) {
49
74
  font-family: var(--font-geist-sans);
50
75
  }
51
-
52
76
  :global(code, pre) {
53
77
  font-family: var(--font-geist-mono);
54
78
  }
55
79
  </style>
56
80
  ```
57
81
 
58
- ### CSS-Only Import
59
-
60
- If you don't need the metadata objects, you can import the CSS directly:
82
+ ### Svelte (Vite)
61
83
 
62
- ```svelte
63
- <script lang="ts">
64
- import 'geist-svelte/font/sans';
65
- import 'geist-svelte/font/mono';
66
- </script>
84
+ ```ts
85
+ // src/main.ts
86
+ import 'geist-svelte/font/sans';
87
+ import 'geist-svelte/font/mono';
67
88
  ```
68
89
 
69
90
  ## Pixel Variants
70
91
 
71
- Geist Pixel includes five distinct variants:
72
-
73
92
  | Export | CSS Variable | Description |
74
93
  | -------------------- | ------------------------------- | ------------------------ |
75
94
  | `GeistPixelSquare` | `--font-geist-pixel-square` | Square pixel shapes |
@@ -80,86 +99,38 @@ Geist Pixel includes five distinct variants:
80
99
 
81
100
  ```svelte
82
101
  <script lang="ts">
83
- import {
84
- GeistPixelSquare,
85
- GeistPixelGrid,
86
- GeistPixelCircle,
87
- GeistPixelTriangle,
88
- GeistPixelLine,
89
- } from 'geist-svelte/font/pixel';
102
+ import 'geist-svelte/font/pixel';
90
103
  </script>
91
104
  ```
92
105
 
93
- ## With Tailwind CSS
94
-
95
- All fonts are available through CSS variables. Import the fonts in your root layout, then configure Tailwind.
96
-
97
- ### Tailwind CSS v4
98
-
99
- In your `app.css`:
100
-
101
- ```css
102
- @theme {
103
- --font-sans: var(--font-geist-sans);
104
- --font-mono: var(--font-geist-mono);
105
- --font-pixel-square: var(--font-geist-pixel-square);
106
- --font-pixel-grid: var(--font-geist-pixel-grid);
107
- --font-pixel-circle: var(--font-geist-pixel-circle);
108
- --font-pixel-triangle: var(--font-geist-pixel-triangle);
109
- --font-pixel-line: var(--font-geist-pixel-line);
110
- }
111
- ```
112
-
113
- ### Tailwind CSS v3
114
-
115
- In your `tailwind.config.js`:
116
-
117
- ```js
118
- module.exports = {
119
- theme: {
120
- extend: {
121
- fontFamily: {
122
- sans: ['var(--font-geist-sans)'],
123
- mono: ['var(--font-geist-mono)'],
124
- 'pixel-square': ['var(--font-geist-pixel-square)'],
125
- 'pixel-grid': ['var(--font-geist-pixel-grid)'],
126
- 'pixel-circle': ['var(--font-geist-pixel-circle)'],
127
- 'pixel-triangle': ['var(--font-geist-pixel-triangle)'],
128
- 'pixel-line': ['var(--font-geist-pixel-line)'],
129
- },
130
- },
131
- },
132
- };
133
- ```
134
-
135
106
  ## CSS Variables
136
107
 
137
- | Import Path | CSS Variable |
138
- | ------------------------------------ | ------------------------------- |
139
- | `geist-svelte/font/sans` | `--font-geist-sans` |
140
- | `geist-svelte/font/mono` | `--font-geist-mono` |
141
- | `geist-svelte/font/sans-non-variable`| `--font-geist-sans-non-variable`|
142
- | `geist-svelte/font/mono-non-variable`| `--font-geist-mono-non-variable`|
143
- | `geist-svelte/font/pixel` | `--font-geist-pixel-square` |
144
- | | `--font-geist-pixel-grid` |
145
- | | `--font-geist-pixel-circle` |
146
- | | `--font-geist-pixel-triangle` |
147
- | | `--font-geist-pixel-line` |
108
+ | Import Path | CSS Variable |
109
+ | ------------------------------------- | -------------------------------- |
110
+ | `geist-svelte/font/sans` | `--font-geist-sans` |
111
+ | `geist-svelte/font/mono` | `--font-geist-mono` |
112
+ | `geist-svelte/font/sans-non-variable` | `--font-geist-sans-non-variable` |
113
+ | `geist-svelte/font/mono-non-variable` | `--font-geist-mono-non-variable` |
114
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-square` |
115
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-grid` |
116
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-circle` |
117
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-triangle` |
118
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-line` |
148
119
 
149
120
  ## Non-Variable Fonts
150
121
 
151
- Variable fonts (~30kb) are recommended. For browsers that don't support variable fonts, use the non-variable variants (~300kb):
122
+ Variable fonts are recommended (smaller). Use non-variable variants only for legacy browser support:
152
123
 
153
124
  ```svelte
154
125
  <script lang="ts">
155
- import { GeistSansNonVariable } from 'geist-svelte/font/sans-non-variable';
156
- import { GeistMonoNonVariable } from 'geist-svelte/font/mono-non-variable';
126
+ import 'geist-svelte/font/sans-non-variable';
127
+ import 'geist-svelte/font/mono-non-variable';
157
128
  </script>
158
129
  ```
159
130
 
160
131
  ## TypeScript API
161
132
 
162
- Each export provides a metadata object:
133
+ Use named imports only if you need metadata:
163
134
 
164
135
  ```ts
165
136
  import { GeistSans } from 'geist-svelte/font/sans';
@@ -168,8 +139,12 @@ GeistSans.variable; // '--font-geist-sans'
168
139
  GeistSans.style.fontFamily; // full font-family string with fallbacks
169
140
  ```
170
141
 
171
- ## License
142
+ ## Troubleshooting
172
143
 
173
- The Geist font family is free and open sourced under the [SIL Open Font License](https://scripts.sil.org/OFL).
144
+ - **Fonts not applying:** confirm font imports run in your root entry (`+layout.svelte` or `main.ts`) and your CSS/Tailwind theme maps the variables.
145
+ - **Unused import warnings:** use side-effect imports (`import 'geist-svelte/font/sans';`).
146
+ - **Strict CSP:** allow your built asset origin in `font-src`.
147
+
148
+ ## License
174
149
 
175
- This package is licensed under the MIT License.
150
+ The Geist font family is free and open sourced under the [SIL Open Font License](https://scripts.sil.org/OFL). This package is licensed under the MIT License.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "geist-svelte",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Geist font family for Svelte/SvelteKit — Sans, Mono, and Pixel variants by Vercel.",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -75,4 +75,4 @@
75
75
  "typescript": "^5.0.0",
76
76
  "vite": "^6.3.0"
77
77
  }
78
- }
78
+ }