Merge branch 'customize-fonts'

docs/source/docs/fonts.blade.md

@@ -33,6 +33,44 @@ features:
 
 ## Customizing
 
+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.
+
+@component('_partials.customized-config', ['key' => 'fonts'])
+- 'sans': ['system-ui', 'BlinkMacSystemFont', ...],
+- 'serif': ['Constantia', 'Lucida Bright', ...],
+- 'mono': ['Menlo', 'Monaco', ...],
++ 'display': ['Oswald', ...],
++ 'body': ['Open Sans', ...],
+@endcomponent
+
+Font families can be specified as an array or as a simple comma-delimited string:
+
+```js
+{
+ // Array format:
+ 'sans': ['Helvetica', 'Arial', 'sans-serif'],
+
+ // Comma-delimited format:
+ 'sans': 'Helvetica, Arial, sans-serif',
+}
+```
+
+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.
+
+```js
+{
+ // Won't work:
+ 'sans': ['Exo 2', ...],
+
+ // Add quotes:
+ 'sans': ['"Exo 2"', ...],
+
+ // ...or escape the space:
+ 'sans': ['Exo\\ 2', ...],
+}
+
+```
+
 @include('_partials.variants-and-disabling', [
  'utility' => [
  'name' => 'font',
@@ -42,34 +80,3 @@ features:
  'responsive',
  ],
 ])
-
-### Note
-
-Some font names are required to be wrapped in quotes, such as fonts with an integer in their name. 
-
-For example, in the fonts section of your config file:
-```js
-// ...
-
-module.exports = {
- // ...
- fonts: {
- sans: [
- 'Exo 2', // Replace this...
- '"Exo 2"', // With this...
- '-apple-system',
- 'BlinkMacSystemFont',
- 'Segoe UI',
- 'Roboto',
- 'Oxygen',
- 'Ubuntu',
- 'Cantarell',
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- 'sans-serif'
- ],
- // ...
- }
-}
-```