beta: Info about fonts

Author: Marcosld

doc/llms.md

@@ -27,6 +27,14 @@ repository at `https://github.com/Telefonica/mistica-web/blob/master/doc/<filena
 6. **Always namespace React hooks**: `React.useState`, `React.useEffect`, `React.useRef`.
 7. **Add `'use client';`** directive to client components when using Next.js app router.
 8. Use `skinVars.rawColors.*` (not `skinVars.colors.*`) when applying alpha with `applyAlpha`.
+9. **Always set `font-family` on `body`.** Mistica does NOT inject a font family — without it browsers fall
+   back to their default serif font (e.g. Times New Roman on desktop). At minimum add this to your global CSS:
+   ```css
+   body {
+     font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+   }
+   ```
+   See [fonts.md](./fonts.md) for full setup including `@font-face` declarations and dynamic font sizes.
 
 ## Install
 
@@ -42,6 +50,15 @@ npm install @telefonica/mistica
 
 ## Quick Start
 
+**Required global CSS** — add this to your global stylesheet (e.g. `globals.css`). Mistica does not inject a
+font family, so without it browsers render text with their default serif font:
+
+```css
+body {
+  font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+```
+
 ```tsx
 'use client';
 

skills/mistica/SKILL.md

@@ -108,18 +108,40 @@ These rules MUST be followed in ALL generated code:
 
 10. **Use `small` prop on buttons** inside cards and `EmptyStateCard`.
 
-11. **Do NOT wrap these components in `ResponsiveLayout`** — they already contain one internally:
+11. **Always set `font-family` on `body`.** Mistica does NOT inject a font — without it browsers fall back to
+    their default serif font (Times New Roman on desktop). Add to your global CSS:
+
+    ```css
+    body {
+      font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    }
+    ```
+
+    Read `node_modules/@telefonica/mistica/doc/fonts.md` for full `@font-face` setup.
+
+12. **Do NOT wrap these components in `ResponsiveLayout`** — they already contain one internally:
     `HeaderLayout`, `MainSectionHeaderLayout`, `Hero`, `CoverHero`, `MasterDetailLayout`,
     `ButtonFixedFooterLayout`, `NavigationBar`, `MainNavigationBar`, `FunnelNavigationBar`, `Tabs`,
     `SuccessFeedbackScreen`, `ErrorFeedbackScreen`, `InfoFeedbackScreen`, `LoadingScreen`,
     `BrandLoadingScreen`. Place them at page level, side by side with `ResponsiveLayout` blocks.
 
-12. **Use carousels only for horizontal content.** `Carousel` and `CenteredCarousel` are horizontal-scroll
+13. **Use carousels only for horizontal content.** `Carousel` and `CenteredCarousel` are horizontal-scroll
     components — always place them **inside** `ResponsiveLayout`. `Slideshow` bleeds full-width automatically
     and should be placed **outside** `ResponsiveLayout`.
 
 ## Quick Reference
 
+### Required global CSS
+
+Add to your global stylesheet (e.g. `globals.css`, `index.css`). Without this, browsers render Mistica text
+with their default serif font (Times New Roman on desktop):
+
+```css
+body {
+  font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+```
+
 ### Standard page structure
 
 ```tsx