# `ab-nextjs-fonts` > IMPORTANT: This is a work in progress and subject to major changes until version 1.0. ✏️ This is a lightweight collection of React fonts created by [Abraham Ukachi](https://github.com/abraham-ukachi), and optimized for [Next.js](https://nextjs.org/docs) applications 😎. ## Getting Started ### Installation #### npm ```bash npm i ab-nextjs-fonts ``` #### pnpm ```bash pnpm install ab-nextjs-fonts ``` --- ## Fonts A list of all the supported **fonts** and their current status: | No. | Name | Status | |:----|:-----|:-------| | 1 | *`Inter`* | [Done](./inter) | | 2 | *`Mulish`* | [Done](./mulish) | | 3 | *`Quicksand`* | [Done](./quicksand) | | 4 | *`Roboto`* | [Done](./roboto) | | 5 | *`ZillaSlab`* | [Done](./zilla-slab) | | 6 | *`Roboto Mono`* ⌨️ | [Done](./roboto-mono) | > NOTE: These fonts are also available offline ;) See [ab-nextjs-theme/typography](https://github.com/abraham-ukachi/ab-nextjs-theme/typography) for more details. ### Inter Use `font-inter-*` tailwindcss utilities to apply the **Inter** font to your nextjs/react component: ```tsx

...

# or

...

# or

...

``` ### Mulish Use `font-mulish-*` tailwindcss utilities to apply the **Mulish** font to your nextjs/react component: ```tsx

...

# or

...

# or

...

``` ### Quicksand Use `font-quicksand-*` tailwindcss utilities to apply the **Quicksand** font to your nextjs/react component: ```tsx

...

# or

...

# or

...

``` ### Roboto Use `font-roboto-*` tailwindcss utilities to apply the **Roboto** font to your nextjs/react component: ```tsx

...

# or

...

# or

...

``` ### Roboto Mono ⌨️ The code font (0.2.6). Variable weight 100–700, normal + italic, Latin + Cyrillic, under the [SIL Open Font License 1.1](./roboto-mono/OFL.txt). Import the stylesheet, then use the `'Roboto Mono'` family or the `font-robotomono-*` utilities: ```css @import 'ab-nextjs-fonts/roboto-mono/styles.css'; code { font-family: 'Roboto Mono', ui-monospace, monospace; } ``` ```tsx pnpm add ab-nextjs-core # or ... ``` `ab-nextjs-theme` ≥ 0.3.4 uses it as `--ab-font-code`, with the system monospace stack as fallback. ### Zilla Slab Use `font-zillaslab-*` tailwindcss utilities to apply the **ZillaSlab** font to your nextjs/react component: ```tsx

...

# or

...

# or

...

``` ## TODOs - [ ] Optimize all fonts - [ ] Add the *`Sacramento`* font - [ ] Add a *`Nerd Font`* font (for easy icon support) ## Learn More abElements To learn more about **`abElements`**, take a look at the following resources: - [abElements Documentation](https://ab-elements.vercel.app/docs) - learn about `abElements` features and API. - [abElements Animations](https://ab-elements.vercel.app/docs#animations) - learn about **animations** in `abElements`. - [abElements Core](https://ab-elements.vercel.app/docs#core) - learn about **core** in `abElements`. - [abElements Theme](https://ab-elements.vercel.app/docs#theme) - learn about **theme** in `abElements`. - [abElements Icons](https://ab-elements.vercel.app/docs#icons) - learn about **icons** in `abElements`. - [abElements Components](https://ab-elements.vercel.app/docs#components) - learn about **components** in `abElements`. - [abElements Fonts](https://ab-elements.vercel.app/docs#fonts) - learn about **fonts** in `abElements`. - [abElements Hooks](https://ab-elements.vercel.app/docs#hooks) - learn about **hooks** in `abElements`. You can check out [the abElements GitHub repository](https://github.com/abraham-ukachi/ab-elements-app) for more details. ## License This **`ab-nextjs-fonts`** project is [MIT Licensed](./LICENSE) ;)