apple-svelte's font stack supports system fonts on most platforms. If you wish to change this, you
can edit the --sans-serif-font-family and --monospace-font-family variables.
<style>
:root {
--sans-serif-font-family: ui-sans-serif, 'SF Pro', Roboto, 'Fira Sans', Oxygen, Ubuntu,
'Segoe UI', 'Helvetica Neue', 'Noto Sans', Arial, sans-serif;
--monospace-font-family: ui-monospace, 'SF Mono', 'Roboto Mono', 'Fira Mono', 'Oxygen Mono',
'Ubuntu Mono', 'Cascadia Code', Menlo, 'Noto Sans Mono', Consolas, monospace;
}
</style>
If you're using a third-party font, make sure to include it in your HTML head. Below is a list of classes you can set text in your project to.
| Name | Class |
| Large title | large-title |
| Large title emphasized | large-title-emphasized |
| Title 1 | title1 |
| Title 1 emphasized | title1-emphasized |
| Title 2 | title2 |
| Title 2 emphasized | title2-emphasized |
| Title 3 | title3 |
| Title 3 emphasized | title3-emphasized |
| Headline | headline |
| Headline italic | headline-italic |
| Body | body |
| Body emphasized | body-emphasized |
| Body italic | body-italic |
| Body emphasized italic | body-emphasized-italic |
| Callout | callout |
| Callout emphasized | callout-emphasized |
| Callout italic | callout-italic |
| Callout emphasized italic | callout-emphasized-italic |
| Subheadline | subheadline |
| Subheadline emphasized | subheadline-emphasized |
| Subheadline italic | subheadline-italic |
| Subheadline emphasized italic | subheadline-emphasized-italic |
| Footnote | footnote |
| Footnote emphasized | footnote-emphasized |
| Footnote italic | footnote-italic |
| Footnote emphasized italic | footnote-emphasized-italic |
| Caption 1 | caption1 |
| Caption 1 emphasized | caption1-emphasized |
| Caption 1 italic | caption1-italic |
| Caption 1 emphasized italic | caption1-emphasized-italic |
| Caption 2 | caption2 |
| Caption 2 emphasized | caption2-emphasized |
| Caption 2 italic | caption2-italic |
| Caption 2 emphasized italic | caption2-emphasized-italic |