Skip to content

Commit ca8b38b

Browse files
committed
Merge branch 'customize-fonts'
2 parents 1b99565 + 2380290 commit ca8b38b

File tree

1 file changed

+38
-31
lines changed

1 file changed

+38
-31
lines changed

docs/source/docs/fonts.blade.md

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,44 @@ features:
3333

3434
## Customizing
3535

36+
By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospace stack. You can change, add, or remove these by editing the `fonts` section of your Tailwind config.
37+
38+
@component('_partials.customized-config', ['key' => 'fonts'])
39+
- 'sans': ['system-ui', 'BlinkMacSystemFont', ...],
40+
- 'serif': ['Constantia', 'Lucida Bright', ...],
41+
- 'mono': ['Menlo', 'Monaco', ...],
42+
+ 'display': ['Oswald', ...],
43+
+ 'body': ['Open Sans', ...],
44+
@endcomponent
45+
46+
Font families can be specified as an array or as a simple comma-delimited string:
47+
48+
```js
49+
{
50+
// Array format:
51+
'sans': ['Helvetica', 'Arial', 'sans-serif'],
52+
53+
// Comma-delimited format:
54+
'sans': 'Helvetica, Arial, sans-serif',
55+
}
56+
```
57+
58+
Note that **Tailwind does not automatically escape font names** for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
59+
60+
```js
61+
{
62+
// Won't work:
63+
'sans': ['Exo 2', ...],
64+
65+
// Add quotes:
66+
'sans': ['"Exo 2"', ...],
67+
68+
// ...or escape the space:
69+
'sans': ['Exo\\ 2', ...],
70+
}
71+
72+
```
73+
3674
@include('_partials.variants-and-disabling', [
3775
'utility' => [
3876
'name' => 'font',
@@ -42,34 +80,3 @@ features:
4280
'responsive',
4381
],
4482
])
45-
46-
### Note
47-
48-
Some font names are required to be wrapped in quotes, such as fonts with an integer in their name.
49-
50-
For example, in the fonts section of your config file:
51-
```js
52-
// ...
53-
54-
module.exports = {
55-
// ...
56-
fonts: {
57-
sans: [
58-
'Exo 2', // Replace this...
59-
'"Exo 2"', // With this...
60-
'-apple-system',
61-
'BlinkMacSystemFont',
62-
'Segoe UI',
63-
'Roboto',
64-
'Oxygen',
65-
'Ubuntu',
66-
'Cantarell',
67-
'Fira Sans',
68-
'Droid Sans',
69-
'Helvetica Neue',
70-
'sans-serif'
71-
],
72-
// ...
73-
}
74-
}
75-
```

0 commit comments

Comments
 (0)