Fonts

Use Astryx typography components and theme values unless the template must demonstrate a specific licensed typeface. A copied template should normally inherit the app typography instead of installing a new global font.

• Do not add a font only to make sample content look more polished.
• Do not override the app body font from a template.
• Use a custom face only for a real product or content requirement that the integration package owns.

Keep the font files beside a package-owned stylesheet. The stylesheet can use relative url() paths because it stays in the package, and the template imports the stylesheet by its public path (astryx docs cli/integrations/building-blocks/templates/build-the-template/template-assets/template-styles).

css
@font-face {
  font-family: 'Acme Sans';
  src: url('../assets/fonts/acme-sans-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
​
.acme-dashboard-title {
  font-family: 'Acme Sans', sans-serif;
}

• Ship WOFF2 when it satisfies the supported browsers. Add another format only when those browsers require it.
• Declare every weight and style the template uses. Do not make the browser synthesize bold or italic because a file is missing.
• Use font-display: swap unless the product requirement and performance test justify another value.
• Confirm that the font license permits redistribution in the integration package.

Exporting the stylesheet does not publish the font files it points to. Include the font directory in the package as well (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/export-template-assets).

When you test the template in an app (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/test-template-in-app), also confirm the following.

• Every font request succeeds from the built asset path.
• Computed styles show the requested family, weight, and style.
• Text stays readable with the fallback stack when a font loads slowly or fails.