ab-nextjs-fonts v0.2.1
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-fontspnpm
pnpm install ab-nextjs-fontsFonts
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
Sacramentofont - Add a
Nerd Fontfont (for easy icon support)
Learn More abElements
To learn more about abElements, take a look at the following resources:
- abElements Documentation - learn about
abElementsfeatures 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 ;)