# Change UI font and text size (/start/interface-font)



This page explains how to change the UI font and text size in a Pixi’VN project.

<Callout title="Templates" type="info">
  Pixi’VN templates use Vite and Tailwind CSS, so the instructions below are tuned for that setup.
</Callout>

Import the font [#import-the-font]

To import a font you can use a service such as [Google Fonts](https://fonts.google.com/) or host fonts locally. For Google Fonts, add an `@import` to your `index.css`.

Example:

```css title="index.css"
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
```

For local fonts, copy the files to `public/fonts/` and declare an `@font-face` in `index.css`.

Example:

```css title="index.css"
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('/fonts/MyCustomFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
```

Set the global font and sizes [#set-the-global-font-and-sizes]

In `index.css` (or your global stylesheet) set the font family and — if desired — CSS variables for sizes.

Example:

```css title="index.css"
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-motion";

:root {
  --ui-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto; /* [!code ++] */
  --ui-font-size: 16px; /* [!code ++] */
}

html,
body {
  background-color: #242424;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

@layer base { /* [!code ++] */
  html { font-size: 16px; } /* [!code ++] */
  body { font-family: var(--ui-font-family); } /* [!code ++] */
  .ui-text { font-size: var(--ui-font-size); } /* [!code ++] */
} /* [!code ++] */
```

Use Tailwind utilities in components [#use-tailwind-utilities-in-components]

Prefer Tailwind classes for consistency.

Example:

* React: `<div className="font-sans text-ui-base">UI text</div>`
* Vue: `<div class="font-sans text-ui-base">UI text</div>`

For UI parts that need a custom look (dialog box, choice menu) add classes like `font-display text-ui-lg`.