@moonbase.sh/storefront 3.0.2 → 3.2.0

package/README.md

@@ -140,6 +140,48 @@ A redirected buyer is always brought back to your page once they've paid, so
 The hosted checkout stays anonymous for the trip — it prefills from the order rather
 than signing the buyer into a Moonbase account, matching the overlay's behavior.
 
+### Fonts
+
+`theme.fonts.heading` and `theme.fonts.body` each take one of:
+
+| Value | What gets loaded |
+| --- | --- |
+| A built-in name, e.g. `'Montserrat'` | The widget loads that family from `assets.moonbase.sh`. |
+| `'inherit'` | Nothing. The widget renders in whatever font your page already uses. |
+| `'system'` | Nothing. The widget uses its own system stack. |
+| `{ family }` | Nothing. Names any family your page already loads. |
+| `{ family, stylesheet }` | The stylesheet you name, from wherever you host it. |
+
+The built-in families are `Inter`, `Roboto`, `EB Garamond`, `Merriweather`, `Poppins`,
+`PT Serif`, `Montserrat` and `Aleo`. Either slot accepts any of them.
+
+They are served from Moonbase's own asset host — the same origin that serves the widget
+itself, and the same payload the hosted checkout uses, so the two share a cache entry.
+Nothing is requested from Google Fonts, which matters if you sell into mainland China
+(where `fonts.googleapis.com` is unreachable) or want to keep visitor IPs away from
+Google.
+
+The distinction that catches people out: `'Inter'` means "load Inter for me";
+`{ family: 'Inter' }` means "the family is Inter, I already load it".
+
+```ts
+// Inherit your page's fonts. Loads nothing, requests nothing.
+Moonbase.configure({ theme: { fonts: { heading: 'inherit', body: 'inherit' } } })
+
+// Self-hosted faces — the widget injects the stylesheet.
+Moonbase.configure({
+  theme: {
+    fonts: {
+      heading: { family: '"Noto Serif SC", serif', stylesheet: '/assets/fonts/noto-serif-sc.css' },
+      body: { family: '"Noto Sans SC", sans-serif', stylesheet: '/assets/fonts/noto-sans-sc.css' },
+    },
+  },
+})
+
+// A family your page already loads — the widget just names it.
+Moonbase.configure({ theme: { fonts: { body: { family: '"Inter var", sans-serif' } } } })
+```
+
 `pricing.trailingZeros` controls how whole prices render. The default `'auto'`
 drops the decimals — a $10.00 product shows as `$10`. Set it to `'always'` to keep
 the currency's own fraction digits instead (`$10.00`, and still `¥1000` for

package/dist/moonbase.d.ts

@@ -62,6 +62,22 @@ export declare interface MetaPixelConfig {
 declare const Moonbase_2: MoonbaseImpl;
 export default Moonbase_2;
 
+/** Families the widget ships with, served from Moonbase's own asset host. */
+export declare type MoonbaseBuiltInFont = 'Inter' | 'Roboto' | 'EB Garamond' | 'Merriweather' | 'Poppins' | 'PT Serif' | 'Montserrat' | 'Aleo';
+
+export declare interface MoonbaseCustomFont {
+    /**
+     * Any CSS `font-family` list — `'PingFang SC'`, `'"Noto Sans SC", sans-serif'`. Used verbatim,
+     * with the widget's system stack appended as a last resort.
+     */
+    family: string;
+    /**
+     * Stylesheet providing the face, injected as `<link rel="stylesheet">`. Absolute or
+     * page-relative. Omit it when the host page already loads the family.
+     */
+    stylesheet?: string;
+}
+
 export declare enum MoonbaseEvent {
     SignedIn = "signed-in",
     SignedUp = "signed-up",
@@ -151,6 +167,12 @@ export declare interface MoonbaseEventArgs {
 
 declare type MoonbaseEventEmitter = <TEvent extends MoonbaseEvent>(eventType: TEvent, event: MoonbaseEventArgs[TEvent]) => void;
 
+/**
+ * A font slot takes a built-in name, `'inherit'` (whatever the host page renders at that spot),
+ * `'system'` (the widget's own system stack, no network), or a family of your own.
+ */
+export declare type MoonbaseFont = MoonbaseBuiltInFont | 'inherit' | 'system' | MoonbaseCustomFont;
+
 declare class MoonbaseImpl implements MoonbaseInstance {
     private initialized;
     private pinia;
@@ -452,8 +474,21 @@ export declare interface MoonbaseOptions {
             background: 'white' | 'gray';
         };
         fonts: {
-            heading: 'Poppins' | 'PT Serif' | 'Montserrat' | 'Aleo';
-            body: 'Inter' | 'Roboto' | 'EB Garamond' | 'Merriweather';
+            /**
+             * Font for headings and display text. Either a built-in family, which the widget loads from
+             * Moonbase's own asset host, or one of:
+             *
+             * - `'inherit'` — render in whatever font the host page uses at that spot. Loads nothing.
+             * - `'system'` — the widget's own system stack. Loads nothing.
+             * - `{ family }` — name any family the page already loads.
+             * - `{ family, stylesheet }` — name any family and the URL to load the face from.
+             *
+             * The distinction that catches people out: `'Inter'` means "load Inter for me",
+             * `{ family: 'Inter' }` means "the family is Inter, I already load it".
+             */
+            heading: MoonbaseFont;
+            /** As `heading`, for body copy. Either slot accepts any of the built-in families. */
+            body: MoonbaseFont;
         };
         corners: 'sharp' | 'soft' | 'round';
         buttons: 'outlined' | 'light';