fn
useLocalFonts
v0.0.14testeddemoReactive wrapper around the Local Font Access API for enumerating the user's locally installed fonts.
Examples
ts
const { isSupported, fonts, query } = useLocalFonts();
// Call from a click handler so the permission prompt is allowed
async function pickFonts() {
await query();
console.log(fonts.value.map(font => font.fullName));
}ts
// Query only specific fonts by PostScript name
const { fonts, query } = useLocalFonts();
await query({ postscriptNames: ['Arial-BoldMT'] });Demo
Loading demo…
Signature
ts
export function useLocalFonts(options: UseLocalFontsOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
options? | UseLocalFontsOptions | Options |
Returns
UseLocalFontsReturnisSupported, fonts, error, and query()| Property | Type | Description |
|---|---|---|
isSupported | ComputedRef<boolean> | Whether the Local Font Access API is supported |
fonts | ShallowRef<FontData[]> | The fonts returned by the most recent successful query() |
error | ShallowRef<unknown | null> | The last error thrown by query(), or null |
query | (queryOptions?: QueryLocalFontsOptions) => Promise<FontData[] | undefined> | Enumerate the locally installed fonts. Resolves with the font list, or
undefined when the API is unsupported. Pass postscriptNames to filter. |