CSS Styles

Fonts

Jhana UI uses CSS variables, so you can configure your fonts however you need, or just use the included fonts. You can use your own font-face, if you set those variables at the theme-root level. Ideally, your font is variable and supports the `wght` and `opsz` variation settings, as well as the `tnum` feature setting. You can inject your own variable font configurations as well.

font-variables.css

.theme-root {
    --font: 'Inter';                /* Global font-family */
    --fontVari: 'wdth' 104;         /* Global font-variation-settings */
    --fontFeat: 'liga' 1, 'calt' 1; /* Global font-feature-settings */
    --fontMono: 'Courier New';      /* Monospace font-family */
    --fontMonoVari: 'wdth' 98;      /* Monospace font-variation-settings */
    --fontMonoFeat: 'liga' 0;       /* Monospace font-feature-settings */
}

For reference, this is how Jhana implements its included font stylesheets.

@leon8ix/jhana-ui/fonts/inter.css

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('./InterVariable-4.0.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('./InterVariable-4.0-Italic.woff2') format('woff2');
}
.theme-root {
	--font: Inter;
	/* Ligatures / Contextual alternates / Simplified u / Capital G with spur */
	--fontFeat: 'liga' 1, 'calt' 1, 'cv06' 1, 'cv10' 1;
}