File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -263,3 +263,55 @@ import { join } from "node:path"
263263 ]}
264264/>
265265```
266+
267+ ## Configuring Fallback Font Name
268+
269+ The ` fallbackName ` attribute per config object can be used to configure the fallback font's family name (in CSS).
270+
271+ ``` astro
272+ ---
273+ import { join } from "node:path"
274+ ---
275+
276+ <AstroFont
277+ config={[
278+ {
279+ name: "Afacad",
280+ src: [
281+ {
282+ style: 'bold',
283+ weight: '700',
284+ path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
285+ },
286+ ],
287+ preload: true,
288+ display: "swap",
289+ fallback: "sans-serif",
290+ fallbackName: "Afacad override",
291+ selector: ".custom_class",
292+
293+ // My Custom Fallback Font Name
294+ fallbackName: "Afacad Override",
295+
296+ },
297+ {
298+ name: "Inter",
299+ src: [
300+ {
301+ weight: '400',
302+ style: 'normal',
303+ path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
304+ }
305+ ],
306+ preload: true,
307+ display: "swap",
308+ fallback: "serif",
309+ cssVariable: "astro-font",
310+
311+ // My Custom Fallback Font Name
312+ fallbackName: "Inter Custom Override",
313+
314+ },
315+ ]}
316+ />
317+ ```
You can’t perform that action at this time.
0 commit comments