Documentation Showcase Donations Github Discord Login Sign up

Components

Utilities

Fonts

Showcase

Donations

Login

Sign up

Github

Discord

Components

Utilities

Fonts

Add a font

To display it perfectly, we need to know the metrics of your font. They are 5 values we need:

--units-per-em

--font-cap-size

--ascent

--descent

--line-gap

Those values will be given to you when converting your font.

Now you just need to add those variables to the selector of your choice, plus a variable named font-family containing the name of your font as such:

@font-face { font-family: "bagerich"; src: url(/static/fonts/bagerich.woff2); } p, li, a{ --font-family: "bagerich" !important; --units-per-em: 1000; --font-cap-height: 697; --line-gap: 0; --ascent: 759; --descent: 240; }

If a text tag doesn't have a designed font, Nimbus CSS will give it the Arial font.

To unable this behaviour, use the no-metrics utility.