Best practices (The Right Way) of using Persian/Arabic web fonts in the website and webapp.
Insert these lines inside <head> tag.
Demo
<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/[email protected]/vazirmatn.min.css" fetchpriority="high" />
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn/vazirmatn[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/><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/[email protected]/vazirmatn-roundot.min.css"
fetchpriority="high"
/>
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot/vazirmatn-roundot[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/><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/[email protected]/sahel.min.css" fetchpriority="high" />
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/sahel/sahel[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>