@maizzle/framework
Version:
Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.
50 lines • 1.9 kB
TypeScript
//#region src/composables/useFont.d.ts
type FontProvider = 'google' | 'bunny';
interface UseFontOptions {
/**
* A single font family name, e.g. `"Roboto"` or `"Open Sans"`.
*
* For fallback fonts, use the `fallback` option instead of a
* comma-separated list here.
*/
family: string;
/** CSS fallback list appended to the `font-family` declaration. */
fallback?: string;
/**
* Font provider used to build the stylesheet URL when `url` is omitted.
* Bunny Fonts is a drop-in, privacy-friendly Google Fonts mirror.
* @default 'google'
*/
provider?: FontProvider;
/**
* Stylesheet URL. When provided, used as-is for the `<link href>`.
* When omitted, a URL is built from `provider`, `family`, `weights`,
* `display` and `styles`.
*/
url?: string;
/** Font weights to load. Ignored when `url` is provided. */
weights?: number[];
/** `font-display` value. Ignored when `url` is provided. */
display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
/** Font styles to load. Ignored when `url` is provided. */
styles?: Array<'normal' | 'italic'>;
}
/**
* Register a font for the current email template.
*
* Builds a Google Fonts stylesheet URL from `family`/`weights`/`display`/`styles`
* (or uses `url` as-is). The renderer injects a `<link>` tag into `<head>`
* and merges `--font-{slug}` declarations into the template's existing
* `@import "tailwindcss"` style block so a `font-{slug}` utility class
* is generated. If no Tailwind import is found, falls back to a `:root`
* declaration so the CSS variable is still available.
*
* Usage in SFC <script setup>:
* ```ts
* useFont({ family: 'Roboto', fallback: 'Verdana, sans-serif', weights: [400, 600] })
* ```
*/
declare function useFont(options: UseFontOptions): void;
//#endregion
export { FontProvider, UseFontOptions, useFont };
//# sourceMappingURL=useFont.d.ts.map