@alwatr/font NPM

Alwatr Font - `@alwatr/font`

Best practices (The Right Way) of using Persian/Arabic web fonts in the website and webapp.

How to use

Insert these lines inside <head> tag. Demo

Vazirmatn

<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/vazirmatn.min.css" fetchpriority="high" />

<link
  rel="preload"
  href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/vazirmatn/vazirmatn[wght].woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Vazirmatn Round Dot

<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/vazirmatn-roundot.min.css"
  fetchpriority="high"
/>

<link
  rel="preload"
  href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/vazirmatn-roundot/vazirmatn-roundot[wght].woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Sahel

<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/sahel.min.css" fetchpriority="high" />

<link
  rel="preload"
  href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/sahel/sahel[wght].woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>