@lesterarte/sefin-ui 0.0.3-dev.0 → 0.0.3-dev.10

package/README.md

@@ -208,12 +208,77 @@ ThemeLoader.loadTheme('dark');
 
 ## Tipografía
 
-La librería usa la fuente **Pluto** de Secretaría de Finanzas:
-- **Pluto-Light** (300)
-- **Pluto-Regular** (400)
-- **Pluto-Bold** (700)
+La librería usa la fuente **Pluto** de Secretaría de Finanzas según las guías de marca:
+- **Pluto-Light** (300) - Para texto ligero
+- **Pluto-Regular** (400) - Para texto normal y body
+- **Pluto-Bold** (700) - Para títulos y encabezados
+
+### ⚠️ Importante: Incluir Archivos de Fuente
+
+La librería define las declaraciones `@font-face` para Pluto, pero **debes proporcionar los archivos de fuente en tu aplicación consumidora**.
+
+#### Opción 1: Archivos locales (Recomendado)
+
+1. **Copia los archivos de fuente** a tu proyecto en la carpeta `src/assets/fonts/`:
+   ```
+   src/
+   └── assets/
+       └── fonts/
+           ├── Pluto-Regular.woff2
+           ├── Pluto-Regular.woff
+           ├── Pluto-Bold.woff2
+           ├── Pluto-Bold.woff
+           ├── Pluto-Light.woff2
+           └── Pluto-Light.woff
+   ```
+
+2. **Configura Angular** para copiar los assets en `angular.json`:
+   ```json
+   {
+     "assets": [
+       "src/favicon.ico",
+       "src/assets",
+       {
+         "glob": "**/*",
+         "input": "src/assets/fonts",
+         "output": "/assets/fonts"
+       }
+     ]
+   }
+   ```
+
+3. **Los estilos de la librería buscarán automáticamente** los archivos en `./assets/fonts/`
+
+#### Opción 2: CDN o fuente externa
+
+Si prefieres usar una fuente desde CDN o servidor externo, puedes sobrescribir las rutas en tu `styles.scss`:
 
-Nota: Debes incluir los archivos de fuente Pluto en tu proyecto.
+```scss
+@font-face {
+  font-family: 'Pluto';
+  src: url('https://tu-cdn.com/fonts/Pluto-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pluto';
+  src: url('https://tu-cdn.com/fonts/Pluto-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+```
+
+#### Formatos de fuente soportados
+
+La librería busca los archivos en este orden de prioridad:
+1. `.woff2` (recomendado - mejor compresión)
+2. `.woff` (fallback)
+3. `.ttf` (fallback)
+
+**Nota:** Si no incluyes los archivos de fuente, el navegador usará las fuentes de fallback del sistema (Arial, Roboto, etc.).
 
 ## Desarrollo