Change UI font and text size

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

Import the font

To import a font you can use a service such as Google Fonts or host fonts locally. For Google Fonts, add an @import to your index.css.

Example:

@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:

@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

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

Example:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-motion";

:root {
  background-color: #242424;
  --ui-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto; 
  --ui-font-size: 16px; 
}

html,
body {
  height: 100%;
}

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

@layer base { 
  html { font-size: 16px; } 
  body { font-family: var(--ui-font-family); } 
  .ui-text { font-size: var(--ui-font-size); } 
} 

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.