# font

The markup of every demo on <https://kuiper.oeds.it/font/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## family

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-sans-serif">Kuiper 0123456789</p></div><p class="background-muted text-center">sans-serif</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-serif">Kuiper 0123456789</p></div><p class="background-muted text-center">serif</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-monospace">Kuiper 0123456789</p></div><p class="background-muted text-center">monospace</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-code">Kuiper 0123456789</p></div><p class="background-muted text-center">code</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-cursive">Kuiper 0123456789</p></div><p class="background-muted text-center">cursive</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><p class="font-fantasy">Kuiper 0123456789</p></div><p class="background-muted text-center">fantasy</p></div></div>
</div>
```

## style

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="background-white-dark padding-4xs"><em class="font-style-normal">Kuiper 0123456789</em></div><p class="background-muted text-center">style-normal</p></div></div>
</div>
```