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