diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index d08385d6e..c873aedfb 100644 --- a/docs/source/docs/fonts.blade.md +++ b/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',