wakeb-font

v1.0.2

Published

a month ago

Offline Arabic & Latin fonts with tree-shakable CSS subpath imports. Zero JS runtime.

Downloads

0High
0Medium
0Low

keroloszakaria

font cairo arabic woff2 css offline tree-shaking font-face wakeb poppins inter lato roboto open-sans rubik tajawal

Features

Zero JS — Pure CSS @font-face declarations, no runtime JavaScript
Tree-shakable — Import only the weights you need, bundlers drop the rest
Offline — All .woff2 files are bundled, no external network requests
Tiny — woff2 format only, font-display: swap for instant text
Universal — Works with Vite, Nuxt, Next.js, Webpack, Astro, plain HTML
Dynamic loading — Optional JS helper to load fonts on demand
21 font families — 8 Arabic + 13 Latin, 100+ weight/style combinations

Install

npm i wakeb-font
# or
yarn add wakeb-font
# or
pnpm add wakeb-font

Quick Start

// Import all weights of a font
import "wakeb-font/cairo";

// Import specific weights only (tree-shaking)
import "wakeb-font/cairo/400";
import "wakeb-font/cairo/700";

body {
  font-family: "Cairo", sans-serif;
}

That's it. No config, no plugins, no JS overhead.

Dynamic Loading

Load fonts on demand using the JS helper:

import { loadFont, getFontMeta, listFonts } from "wakeb-font";

// Load a font (imports its CSS dynamically)
const { family } = await loadFont("cairo");
const { family } = await loadFont("poppins", 700); // specific weight

// Get metadata without loading
getFontMeta("inter"); // { family: "Inter", weights: [100..900] }

// List all available fonts
listFonts(); // ["29lt-bukra", "cairo", "poppins", ...]

Framework Integration

Vite / Vue / React

// main.js
import "wakeb-font/cairo";
import "wakeb-font/poppins/400";

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["wakeb-font/cairo", "wakeb-font/expo-arabic/700"],
});

Next.js

// app/layout.js
import "wakeb-font/inter";

Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ['"Cairo"', "sans-serif"],
      mono: ['"Trip Sans Mono"', "monospace"],
    },
  },
};

Plain HTML

<link rel="stylesheet" href="node_modules/wakeb-font/cairo/index.css" />

Available Fonts

Arabic

| Font | font-family | Import | Weights | | -------------------- | ------------------------ | --------------------------------- | -------------------------------------- | | 29LT Bukra | "29LT Bukra" | wakeb-font/29lt-bukra | 300, 400, 500, 700 | | 29LT Kaff | "29LT Kaff" | wakeb-font/29lt-kaff | 200, 300, 400, 600, 900 | | Cairo | "Cairo" | wakeb-font/cairo | 200, 300, 400, 500, 600, 700, 800, 900 | | DIN Next LT Arabic | "DIN Next LT Arabic" | wakeb-font/din-next-lt-arabic | 400 | | Droid Kufi | "Droid Kufi" | wakeb-font/droid-kufi | 400 | | Expo Arabic | "Expo Arabic" | wakeb-font/expo-arabic | 300, 400, 500, 700 | | IBM Plex Sans Arabic | "IBM Plex Sans Arabic" | wakeb-font/ibm-plex-sans-arabic | 100, 200, 300, 400, 500, 600, 700 | | Tajawal | "Tajawal" | wakeb-font/tajawal | 200, 300, 400, 500, 700, 800, 900 |

Latin

| Font | font-family | Import | Weights | | -------------- | ------------------ | --------------------------- | --------------------------------- | | Clash Display | "Clash Display" | wakeb-font/clash-display | variable | | Inter | "Inter" | wakeb-font/inter | 100–900 | | Lato | "Lato" | wakeb-font/lato | 100, 300, 400, 700, 900 (+italic) | | Open Sans | "Open Sans" | wakeb-font/open-sans | 300–800 (+italic) | | Playwrite IE | "Playwrite IE" | wakeb-font/playwrite-ie | 100, 200, 300, 400 | | Poppins | "Poppins" | wakeb-font/poppins | 100–900 (+italic) | | Public Sans | "Public Sans" | wakeb-font/public-sans | 400 | | Rethink Sans | "Rethink Sans" | wakeb-font/rethink-sans | variable, variable-italic | | Rubik | "Rubik" | wakeb-font/rubik | 300–900 (+italic) | | Times | "Times" | wakeb-font/times | 400 | | Trip Sans | "Trip Sans" | wakeb-font/trip-sans | variable | | Trip Sans Mono | "Trip Sans Mono" | wakeb-font/trip-sans-mono | 400 |

Italic & Variable Variants

// Italic — append 'i' to the weight
import "wakeb-font/poppins/400i";
import "wakeb-font/lato/700i";
import "wakeb-font/rubik/500i";

// Variable fonts
import "wakeb-font/clash-display/variable";
import "wakeb-font/rethink-sans/variable";
import "wakeb-font/rethink-sans/variable-italic";

How It Works

wakeb-font/
  cairo/
    index.css        ← @import all weight files
    400.css          ← @font-face { src: url("./Cairo-Regular.woff2") }
    700.css          ← @font-face { src: url("./Cairo-Bold.woff2") }
    Cairo-Regular.woff2
    Cairo-Bold.woff2
    ...

Each subpath export (wakeb-font/cairo/400) resolves to a single CSS file with an @font-face declaration pointing to a co-located .woff2 file. Your bundler only includes the CSS + font files you actually import.

License

MIT © Wakeb

wakeb-font

Offline Arabic & Latin fonts with tree-shakable CSS subpath imports.

Zero runtime JS
Works with Vite / Nuxt / Webpack / any bundler
font-display: swap for fast rendering
woff2 only — smallest file size
21 font families, 100+ weights

Install

npm i wakeb-font

Usage

Import all weights of a font

import "wakeb-font/cairo";

Import specific weights (tree-shaking)

import "wakeb-font/cairo/400";
import "wakeb-font/cairo/700";

Use in CSS

body {
  font-family: "Cairo", sans-serif;
}

Framework Examples

Vite / Vue / React

// main.js or main.ts
import "wakeb-font/cairo";
import "wakeb-font/ibm-plex-sans-arabic/400";

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["wakeb-font/cairo", "wakeb-font/expo-arabic/700"],
});

Webpack

// index.js
import "wakeb-font/inter";

Plain HTML

<link rel="stylesheet" href="node_modules/wakeb-font/cairo/index.css" />

Available Fonts

| Font | CSS font-family | -------------------- | ------------------------ | 29LT Bukra | "29LT Bukra" | 29LT Kaff | "29LT Kaff" | Cairo | "Cairo" | Clash Display | "Clash Display" | DIN Next LT Arabic | "DIN Next LT Arabic" | Droid Kufi | "Droid Kufi" | Expo Arabic | "Expo Arabic" | IBM Plex Sans Arabic | "IBM Plex Sans | Inter | "Inter" | Lato | "Lato" | Open Sans | "Open Sans" | Playwrite IE | "Playwrite IE" | Poppins | "Poppins" | Public Sans | "Public Sans" | Rethink Sans | "Rethink Sans" | Roboto | "Roboto" | Rubik | "Rubik" | Tajawal | "Tajawal" | Times | "Times" | Trip Sans | "Trip Sans" | Trip Sans Mono | "Trip Sans Mono" | Import | Weights | | --------------------------------- | ------------------------------------------- | | wakeb-font/29lt-bukra | 300, 400, 500, 700 | | wakeb-font/29lt-kaff | 200, 300, 400, 600, 900 | | wakeb-font/cairo | 200, 300, 400, 500, 600, 700, 800, 900 | | wakeb-font/clash-display | variable | | wakeb-font/din-next-lt-arabic | 400 | | wakeb-font/droid-kufi | 400 | | wakeb-font/expo-arabic | 300, 400, 500, 700 | Arabic" | wakeb-font/ibm-plex-sans-arabic | 100, 200, 300, 400, 500, 600, 700 | | wakeb-font/inter | 100, 200, 300, 400, 500, 600, 700, 800, 900 | | wakeb-font/lato | 100, 300, 400, 700, 900 (+italic) | | wakeb-font/open-sans | 300, 400, 500, 600, 700, 800 (+italic) | | wakeb-font/playwrite-ie | 100, 200, 300, 400 | | wakeb-font/poppins | 100–900 (+italic) | | wakeb-font/public-sans | 400 | | wakeb-font/rethink-sans | variable, variable-italic | | wakeb-font/roboto | variable, variable-italic | | wakeb-font/rubik | 300–900 (+italic) | | wakeb-font/tajawal | 200, 300, 400, 500, 700, 800, 900 | | wakeb-font/times | 400 | | wakeb-font/trip-sans | variable | | wakeb-font/trip-sans-mono | 400 |

Import examples

// All weights
import "wakeb-font/ibm-plex-sans-arabic";

// Single weight
import "wakeb-font/ibm-plex-sans-arabic/400";
import "wakeb-font/inter/700";
import "wakeb-font/poppins/600";
import "wakeb-font/tajawal/500";

// Italic variants (append 'i' to weight)
import "wakeb-font/lato/400i";
import "wakeb-font/poppins/700i";
import "wakeb-font/rubik/500i";

// Variable fonts
import "wakeb-font/roboto/variable";
import "wakeb-font/roboto/variable-italic";
import "wakeb-font/clash-display/variable";

How it works

Each import resolves to a plain CSS file containing @font-face declarations with relative paths to bundled .woff2 files. No JavaScript is executed at runtime. Bundlers only include the weights you actually import.

Publish

npm login
npm publish --access public

License

MIT

wakeb-font

Offline Arabic & Latin fonts with tree-shakable CSS subpath imports.

Zero runtime JS
Works with Vite / Nuxt / Webpack / any bundler
font-display: swap for fast rendering
woff2 only — smallest file size

Install

npm i wakeb-font

Usage

Import all weights

import "wakeb-font/cairo";

Import specific weights (tree-shaking)

import "wakeb-font/cairo/400";
import "wakeb-font/cairo/700";

Use in CSS

body {
  font-family: "Cairo", sans-serif;
}

Framework Examples

Vite / Vue / React

// main.js or main.ts
import "wakeb-font/cairo";

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["wakeb-font/cairo"],
});

Webpack

// index.js
import "wakeb-font/cairo";

Plain HTML

<link rel="stylesheet" href="node_modules/wakeb-font/cairo/index.css" />

Available Fonts

| Font | Weights | Import path | | ----- | -------- | ------------------ | | Cairo | 400, 700 | wakeb-font/cairo |

Weight imports

| Weight | Import path | | ------ | ---------------------- | | 400 | wakeb-font/cairo/400 | | 700 | wakeb-font/cairo/700 |

How it works

Each import resolves to a plain CSS file containing @font-face declarations with relative paths to bundled .woff2 files. No JavaScript is executed at runtime.

wakeb-font/
  cairo/
    index.css                          ← imports 400.css + 700.css
    400.css                            ← @font-face for weight 400
    700.css                            ← @font-face for weight 700
    cairo-arabic-400-normal.woff2      ← Arabic subset
    cairo-latin-400-normal.woff2       ← Latin subset
    cairo-latin-ext-400-normal.woff2   ← Latin Extended subset
    cairo-arabic-700-normal.woff2
    cairo-latin-700-normal.woff2
    cairo-latin-ext-700-normal.woff2

Unicode-range subsetting ensures the browser only downloads the subsets it actually needs.

Publish

npm login
npm publish --access public

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Features

Install

Quick Start

Dynamic Loading

Framework Integration

Vite / Vue / React

Nuxt 3

Next.js

Tailwind CSS

Plain HTML

Available Fonts

Arabic

Latin

Italic & Variable Variants

How It Works

License

wakeb-font

Install

Usage

Import all weights of a font

Import specific weights (tree-shaking)

Use in CSS

Framework Examples

Vite / Vue / React

Nuxt

Webpack

Plain HTML

Available Fonts

Import examples

How it works

Publish

License

wakeb-font

Install

Usage

Import all weights

Import specific weights (tree-shaking)

Use in CSS

Framework Examples

Vite / Vue / React

Nuxt

Webpack

Plain HTML

Available Fonts

Weight imports

How it works

Publish

License