Fonts Setup

The library ships five typefaces. They load from Google Fonts CDN at runtime and are declared in the bundled style.css file.

Import

Add one import to your application's entry file (main.tsx, index.tsx, etc.):

import "@xocialive/ui-components/style.css";

That is all that is required. The font-face declarations are emitted by the library's Vite build.

Included fonts

Font	Script support	Weights available
Tajawal	Arabic + Latin	200–900
Cairo	Arabic + Latin	200–900
IBM Plex Sans Arabic	Arabic + Latin	100–700
IBM Plex Sans	Latin + italic	100–700
Playpen Sans Arabic	Arabic + Latin	100–800

Using fonts in a custom MUI theme

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Cairo",
      "Tajawal",
      "IBM Plex Sans Arabic",
      "IBM Plex Sans",
      "-apple-system",
      "BlinkMacSystemFont",
      "Segoe UI",
      "Roboto",
      "Arial",
      "sans-serif",
    ].join(","),
  },
});

When using buildTheme() from the library, the fontFamily dimension is already wired up — you select it by name and the theme builder resolves the correct CSS stack automatically.

Alternative: HTML link tag

<link rel="stylesheet" href="node_modules/@xocialive/ui-components/dist/style.css" />

Use this method only if your bundler cannot process CSS imports in JavaScript entry files (unusual with Vite or webpack).

Troubleshooting

1. Open your browser's Network tab and filter by fonts. You should see requests to fonts.googleapis.com and fonts.gstatic.com.
2. If no font requests appear, confirm the CSS import is present and the bundler is not excluding node_modules CSS.
3. If requests fail with CORS or CSP errors, update your Content Security Policy to allow https://fonts.googleapis.com and https://fonts.gstatic.com.
4. In offline or restricted environments, download the font files and self-host them, replacing the @font-face URLs in a local override CSS file.