docs: add instructions to customize font family for TW

Co-authored-by: Victor Genaev <[email protected]>

docs/src/documentation/05-development/04-migration-guides/03-v10.mdx

@@ -21,7 +21,7 @@ Components in Tailwind should have almost the same API as before, so few breakin
 As mentioned before, this version of Orbit includes the first batch of components styled with Tailwind. Therefore, Tailwind must be installed and configured in your project for you to be able to use these components.
 Please refer to the [official Tailwind documentation](https://tailwindcss.com/docs/installation) and the [Orbit's Tailwind setup documentation](/foundation/tailwind/installation) for more information on how to do that.
 
-As a summary, you should have Tailwind installed and configured in your project, as well as the Orbit preset for Tailwind included on the config file.
+In summary, your project should have Tailwind installed and configured, with the Orbit preset for Tailwind included in the configuration file. If necessary, be sure to extend the theme to customize the default font family and replace Roboto.
 
 ### StyledBox removed
 

packages/orbit-tailwind-preset/README.md

@@ -35,6 +35,14 @@ module.exports = {
     // ...
     path.join(orbitComponentsPath, "**", "*.js"),
   ],
+  // If you need, customize the base font family, e.g. with the System UI font stack (https://github.com/system-fonts/modern-font-stacks#system-ui)
+  theme: {
+    extend: {
+      fontFamily: {
+        base: "system-ui, sans-serif",
+      },
+    },
+  },
   presets: [
     orbitComponentsPreset({
       disablePreflight: false, // default value
@@ -45,6 +53,8 @@ module.exports = {
 
 The `content` property is required for Tailwind to [know which files to scan for classes](https://tailwindcss.com/docs/content-configuration). It should include the path to all your source files that use Tailwind classes. The path to the `@kiwicom/orbit-components` package is required for the component-specific classes to be scanned and built into the final CSS. (The `require.resolve` ensures it works inside of monorepos too).
 
+The `theme` property allows you to override some specific values of the default theme. In particular, if you need to customize the font family, you can change the `base` font family like in the example above.
+
 The `presets` property is required for Tailwind to [know which presets to use](https://tailwindcss.com/docs/presets). It should include the `orbitComponentsPreset` function, which returns the Orbit Tailwind preset.
 
 ## Usage