abraham-ukachi / ab-nextjs-fonts

✏️ A lightweight collection of React fonts created by Abraham Ukachi, and optimized for Next.js applications.

Checkout abElements →

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, and optimized for Next.js applications 😎.

Getting Started

Installation

npm

npm i ab-nextjs-fonts

pnpm

pnpm install ab-nextjs-fonts

---

Fonts

A list of all the supported fonts and their current status:

No.	Name	Status
1	Inter	Done
2	Mulish	Done
3	Quicksand	Done
4	Roboto	Done
5	ZillaSlab	Done

NOTE: These fonts are also available offline ;) See ab-nextjs-theme/typography for more details.

Inter

Use font-inter-* tailwindcss utilities to apply the Inter font to your nextjs/react component:

<p className="font-inter-light">...</p>
# or
<p className="font-inter-medium">...</p>
# or
<p className="font-inter-bold">...</p>

Mulish

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

<p className="font-mulish-light">...</p>
# or
<p className="font-mulish-medium">...</p>
# or
<p className="font-mulish-bold">...</p>

Quicksand

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

<p className="font-quicksand-light">...</p>
# or
<p className="font-quicksand-medium">...</p>
# or
<p className="font-quicksand-bold">...</p>

Roboto

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

<p className="font-roboto-light">...</p>
# or
<p className="font-roboto-medium">...</p>
# or
<p className="font-roboto-bold">...</p>

Zilla Slab

Use font-zillaslab-* tailwindcss utilities to apply the ZillaSlab font to your nextjs/react component:

<p className="font-zillaslab-light">...</p>
# or
<p className="font-zillaslab-medium">...</p>
# or
<p className="font-zillaslab-bold">...</p>

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 - learn about abElements features and API.
• abElements Animations - learn about animations in abElements.
• abElements Core - learn about core in abElements.
• abElements Theme - learn about theme in abElements.
• abElements Icons - learn about icons in abElements.
• abElements Components - learn about components in abElements.
• abElements Fonts - learn about fonts in abElements.
• abElements Hooks - learn about hooks in abElements.

You can check out the abElements GitHub repository for more details.

License

This ab-nextjs-fonts project is MIT Licensed ;)