<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kufam:wght@700,900&family=Vazirmatn:wght@300,400,500&display=swap" rel="stylesheet">
  
  <!--@import-->
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Kufam:wght@700,900&family=Vazirmatn:wght@300,400,500&display=swap');
</style>

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.vazirmatn-<uniquifier> {
  font-family: "Vazirmatn", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900

.kufam-<uniquifier> {
  font-family: "Kufam", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kufam:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">