@driftime/sanity-plugin-font 0.1.0 → 0.1.1
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.
- package/README.md +33 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,17 @@ On the site, a font chosen in Sanity is used much like one from `next/font`, whe
|
|
|
25
25
|
|
|
26
26
|
<br />
|
|
27
27
|
|
|
28
|
+
<figure>
|
|
29
|
+
<picture>
|
|
30
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-picker-dark.png" />
|
|
31
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-picker-light.png" />
|
|
32
|
+
<img src="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-picker-light.png" alt="The font picker open in Sanity Studio on the Google Fonts tab, showing a search field, menus for kind and sort order, and a grid of popular families, each set in its own typeface" />
|
|
33
|
+
</picture>
|
|
34
|
+
<p align="center"><sub><em>The font picker, with every Google Fonts family set in its own typeface.</em></sub></p>
|
|
35
|
+
</figure>
|
|
36
|
+
|
|
37
|
+
<br />
|
|
38
|
+
|
|
28
39
|
## Installation
|
|
29
40
|
|
|
30
41
|
Font is built for Sanity Studio 6.10 and React 19 and declares both as peer dependencies, so the Studio needs to be on those versions already. Node 20.19 or later is required, or 22.12 or later on Node 22.
|
|
@@ -202,6 +213,17 @@ Uploaded files are served from the Sanity CDN, which only sends fonts to the ori
|
|
|
202
213
|
|
|
203
214
|
<br />
|
|
204
215
|
|
|
216
|
+
<figure>
|
|
217
|
+
<picture>
|
|
218
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-upload-dark.png" />
|
|
219
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-upload-light.png" />
|
|
220
|
+
<img src="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-upload-light.png" alt="The font picker on the Upload tab, with the family Landour, the category Display, and one uploaded ExtraBold file above a drop zone for more" />
|
|
221
|
+
</picture>
|
|
222
|
+
<p align="center"><sub><em>An uploaded font, with each file's weight and style read from the file itself.</em></sub></p>
|
|
223
|
+
</figure>
|
|
224
|
+
|
|
225
|
+
<br />
|
|
226
|
+
|
|
205
227
|
### Previewing the Font
|
|
206
228
|
|
|
207
229
|
Once a font is chosen, the field shows "Aa" in each of its weights and styles, and `preview.text` replaces it with the site's own text.
|
|
@@ -217,6 +239,17 @@ defineField({
|
|
|
217
239
|
|
|
218
240
|
<br />
|
|
219
241
|
|
|
242
|
+
<figure>
|
|
243
|
+
<picture>
|
|
244
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-field-dark.png" />
|
|
245
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-field-light.png" />
|
|
246
|
+
<img src="https://raw.githubusercontent.com/driftime/sanity-plugins/HEAD/packages/font/assets/font-field-light.png" alt="A Body Font field in Sanity Studio set to Spectral, previewing Aa in Regular, Italic, SemiBold, and SemiBold Italic" />
|
|
247
|
+
</picture>
|
|
248
|
+
<p align="center"><sub><em>A chosen font, previewed in each weight and style the field requires.</em></sub></p>
|
|
249
|
+
</figure>
|
|
250
|
+
|
|
251
|
+
<br />
|
|
252
|
+
|
|
220
253
|
### Document Previews
|
|
221
254
|
|
|
222
255
|
`createFontPreview` shows a chosen font in a document's preview, in place of the icon its type was given in the schema. It's called in `prepare` with the stored value.
|