@alwatr/font

1.2.0 • Public • Published

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
/>

Package Sidebar

Install

npm i @alwatr/font

Weekly Downloads

10

Version

1.2.0

License

MIT

Unpacked Size

998 kB

Total Files

33

Last publish

Collaborators

  • njfamirm
  • alimd