Clarify how to set a global default font family

src/docs/font-family.mdx

@@ -116,4 +116,32 @@ If you're loading a font from a service like [Google Fonts](https://fonts.google
 
 Browsers require that `@import` statements come before any other rules, so URL imports need to be above imports like `@import "tailwindcss"` which are inlined in the compiled CSS.
 
+### The default font family
+
+The above setup still requires you to apply the font-family using a utility class.
+
+To set a font family as the core default without needing to specify it on every element by using a utility class, set the `default-font-family` variable to the font-family of your choice:
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import "tailwindcss";
+
+@theme {
+  --font-roboto: "Roboto", sans-serif;
+  --default-font-family: var(--font-roboto); /* [!code highlight] */
+}
+```
+
+Initially, [`default-font-family` is set to `font-sans`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css#L494) in Tailwind CSS, so it may be a good thing to include this value as a fallback in case the new default font fails to load:
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import "tailwindcss";
+
+@theme {
+  --font-roboto: "Roboto", sans-serif;
+  --default-font-family: var(--font-roboto, var(--font-sans, initial)); /* [!code highlight] */
+}
+```
+
 </CustomizingYourTheme>

src/docs/theme.mdx

@@ -407,6 +407,37 @@ When you do this, all of the default utilities that use that namespace _(like `b
 
 Learn more about how theme variables map to different utility classes and variants in the [theme variable namespaces](#theme-variable-namespaces) documentation.
 
+### Overriding the default values
+
+There are several variables that allow to define a global default for a small set of values, bypassing the need to use a utility class for the corresponding properties:
+
+- `--default-font-family`
+- `--default-mono-font-family`
+- `--default-transition-duration`
+- `--default-transition-timing-function`
+
+For example, to customize the default `font-family`, simply set the `--default-font-family` variable:
+
+```css
+/* [!code filename:app.css] */
+@import "tailwindcss";
+
+@theme {
+  --font-poppins: Poppins, sans-serif;
+  /* [!code highlight:2] */
+  --default-font-family: var(--font-poppins, initial);
+}
+```
+
+No need for a font-family utility class anymore:
+
+```html
+<!-- [!code filename:HTML] -->
+<h1 className="...">This headline will use Poppins.</h1>
+```
+
+Learn more about default theme variables in the [default theme variable reference](#default-theme-variable-reference) documentation.
+
 ### Using a custom theme
 
 To completely disable the default theme and use only custom values, set the global theme variable namespace to `initial`:
@@ -660,6 +691,13 @@ For reference, here's a complete list of the theme variables included by default
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+  --default-font-family: --theme(--font-sans, initial);
+  --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
+  --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
+  --default-mono-font-family: --theme(--font-mono, initial);
+  --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);
+  --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);
+
   --color-red-50: oklch(97.1% 0.013 17.38);
   --color-red-100: oklch(93.6% 0.032 17.717);
   --color-red-200: oklch(88.5% 0.062 18.334);
@@ -1106,6 +1144,9 @@ For reference, here's a complete list of the theme variables included by default
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-bounce: bounce 1s infinite;
 
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
   @keyframes spin {
     to {
       transform: rotate(360deg);