| 1 | # Configure Fonts |
| 2 | |
| 3 | While you can use HTML and CSS to customize the fonts and style for your slides as you want, Slidev also provides a convenient way to use them effortlessly. |
| 4 | |
| 5 | In your frontmatter, configure as the following: |
| 6 | |
| 7 | ```yaml |
| 8 | --- |
| 9 | fonts: |
| 10 | # basically the text |
| 11 | sans: Robot |
| 12 | # use with `font-serif` css class from UnoCSS |
| 13 | serif: Robot Slab |
| 14 | # for code blocks, inline code, etc. |
| 15 | mono: Fira Code |
| 16 | --- |
| 17 | ``` |
| 18 | |
| 19 | And that's all. |
| 20 | |
| 21 | Fonts will be **imported automatically from a provider via CDN, by default it is [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly. |
| 22 | |
| 23 | ## Local Fonts |
| 24 | |
| 25 | By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing. |
| 26 | |
| 27 | ```yaml |
| 28 | --- |
| 29 | fonts: |
| 30 | # like font-family in css, you can use `,` to separate multiple fonts for fallback |
| 31 | sans: 'Helvetica Neue,Robot' |
| 32 | # mark 'Helvetica Neue' as local font |
| 33 | local: Helvetica Neue |
| 34 | --- |
| 35 | ``` |
| 36 | |
| 37 | ## Weights & Italic |
| 38 | |
| 39 | By default, Slidev imports three weights `200`,`400`,`600` for each font. You can configure them by: |
| 40 | |
| 41 | ```yaml |
| 42 | --- |
| 43 | fonts: |
| 44 | sans: Robot |
| 45 | # default |
| 46 | weights: '200,400,600' |
| 47 | # import italic fonts, default `false` |
| 48 | italic: false |
| 49 | --- |
| 50 | ``` |
| 51 | |
| 52 | This configuration applies to all web fonts. For more fine-grained controls of each font's weights, you will need to manually import them with [HTML](/custom/directory-structure.html#index-html) and CSS. |
| 53 | |
| 54 | ## Fallback Fonts |
| 55 | |
| 56 | For most of the scenarios, you only need to specify the "special font" and Slidev will append the fallback fonts for you, for example: |
| 57 | |
| 58 | ```yaml |
| 59 | --- |
| 60 | fonts: |
| 61 | sans: Robot |
| 62 | serif: Robot Slab |
| 63 | mono: Fira Code |
| 64 | --- |
| 65 | ``` |
| 66 | |
| 67 | will result in |
| 68 | |
| 69 | <!-- eslint-skip --> |
| 70 | |
| 71 | ```css |
| 72 | .font-sans { |
| 73 | font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; |
| 74 | } |
| 75 | .font-serif { |
| 76 | font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif; |
| 77 | } |
| 78 | .font-mono { |
| 79 | font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; |
| 80 | } |
| 81 | ``` |
| 82 | |
| 83 | If you want to disable the fallback fonts, configure as the following: |
| 84 | |
| 85 | ```yaml |
| 86 | --- |
| 87 | fonts: |
| 88 | mono: 'Fira Code, monospace' |
| 89 | fallbacks: false |
| 90 | --- |
| 91 | ``` |
| 92 | |
| 93 | ## Providers |
| 94 | |
| 95 | - Options: `google` | `coollabs` | `none` |
| 96 | - Default: `google` |
| 97 | |
| 98 | Currently, only [Google Fonts](https://fonts.google.com/) and [coolLabs](https://fonts.coollabs.io/) supported, we are planning to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts locally. |
| 99 | |
| 100 | ```yaml |
| 101 | --- |
| 102 | fonts: |
| 103 | provider: none |
| 104 | --- |
| 105 | ``` |
| 106 |