اضافه کردن فونت به پروژه Angular و رونویسی فونت در Angular material

برای اضافه کردن فونت از آنحایی که من فونت را از سایت fontiran میخرم دو تا فایل css در ان قرار داده اند، که من به این صورت عمل میکنم 

فونتها را در پوشه assets هم رده با app و زیر مجموعه src اضافه میکنم همینطور در کنار آن یعنی در پوشه assets پوشه css را  هم اضافه میکنم، فایل فونتها را در پوشه فونت ها  و فایل های css که همراه فونت دانلود شده به پوشه css انتقال میدهم فقط لازم است تا ادرس فایلهای font را کمی تغییر دهم تا ازپوشه درست خوانده شود 

تا اینحا تمام.

از انحایی که از دو فایل css یکی به دیگری رفرنس داده شده است نیاز نیست هر دو فایل را در فایل angular.json که در پروژه انگولار وجود دارد جای دهم، فقط فایل ی را مه  اقدام به استایل دهی صفحات میکند را قرار میدهم 

برای فهم بهتر من فایل دوم را اینجا بارگزار ی میکنم 

@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
body {
	font-family: IRANSansX  !important;
	direction: rtl;
	background-color: #cdcdcd;
	margin: 0;
}
h1, h2, h3, h4, h5, h6,input, textarea {
	font-family: IRANSansX !important;
}
h1 {
	font-weight: bold;
}
.wrapper {
	max-width: 900px;
	margin: 0 auto;
}
.ltr {
	direction: ltr;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-small {
	font-size: 0.8em;
}
.text-xsmall {
	font-size: 0.6em;
}
.text-large {
	font-size: 1.2em;
}
.text-xlarge {
	font-size: 1.4em;
}
.text-underline {
	text-decoration:underline;
}

.text-thin {
	font-weight: 100;
}
.text-UltraLight {
	font-weight: 200;
}
.text-light {
	font-weight: 300;
}
.text-regular {
	font-weight: normal;
}
.text-medium {
	font-weight: 500;
}
.text-demibold {
	font-weight: 600;
}
.text-bold {
	font-weight: bold;
}

.text-extrabold {
	font-weight: 800;
}
.text-black {
	font-weight: 900;
}
.text-extrablack {
	font-weight: 950;
}
.text-heavy {
	font-weight: 1000;
}

blockquote {
	font-weight: 700;
	padding: 10px;
	border: 1px dashed #666666;
}

.mainbox {
	width: 100%;
	background-color: #EFEFEF;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #df79ff;
}

.mainboxnegativ {
	width: 100%;
	background-color: #000000;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #df79ff;
	color: #F9F9F9;
}

.mainbox2 {
	font-size: 1em;
	width: 90%;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.mainboxitalic {
	font-size: 1em;
	font-style: italic;
	width: 90%;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mainbox3 {
	width: 100%;
	background-color: #DFDFDF;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #FF5EAA;
}

.mainbox2negativ {
	font-size: 1em;
	color: #F9F9F9;
	background-color: #000000;
	padding-right: 20px;
}


.farsiparagraph {
	font-size: 1em;
	width: 47%;
	float:right;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;

}

.farsiparagraph_negativ {
	font-size: 1em;
	color: #F9F9F9;
	background-color: #000000;
	width: 47%;
	float:right;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;

}


.englishparagraph {
	font-size: 1em;
	width: 47%;
	float: left;
	direction:ltr;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;


}

.englishparagraph_negativ {
	font-size: 1em;
	color: #F9F9F9;
	background-color: #000000;
	width: 47%;
	float: left;
	direction:ltr;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;


}
.rightbox {
	width: 60%;
	padding-right: 20px;
	padding-left: 5px;
	float: right;
	margin-left: 10px;
	margin-bottom: 0px;
	min-width: 0px;
	background-color: #F7F7F7;

}

.titelbox {
	width: 60%;
	padding-right: 25px;
	padding-left: 0px;
	float: right;
	margin-left: 10px;
	margin-bottom: 0px;
	min-width: 0px;
	background-color: #d5d5d5;
	color: #4B4B4B;
}


.lefttbox {
	
	padding-right: 20px;
	padding-left: 4px;
	float: right;
	margin-bottom: 10px;
	min-width: 0px;
}

.alphabet {
	width: 35%;
	float: left;
	font-size: 20em;
	text-align: center;
	font-weight: 700;
	color: #999999;
}

.alphabet2 {
	width: 35%;
	float: left;
	direction: ltr;
	font-size: 1.6em;
	text-align: left;
	font-weight: 600;
	color: #333333;
	margin-top: 100px;
}
.footer {
	font-weight: 400;
	font-size: 0.7em;
	text-align: center;
	direction: ltr;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

اعمال فونت به body و المانهای مهم است 

خوب حالا فایل myfont را به angular.json اضافه میکنم 

      "styles": [
              "@angular/material/prebuilt-themes/azure-blue.css",
             "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
             "src/assets/css/fontstyle.css",
              "src/styles.scss"
            ],

در اینجا فقط کد های مربوط به اضافه کردن css ها را اورده ام از انحایی که سه css دیگر به پروژه خود اضافه کرده بودم، آنها را نیز لیست کردم 

الان فونت به پروژه اضافه شد اما Angular material اجازه نمیدهد فونتها اعمال شود برای همین مجبویم برای آن خودمان them تعریف کنیم 

در فایل style.scss این چنین مینویسیم 

@use '@angular/material' as mat;
@include mat.core();


$my-font-family: 'IRANSansX';

$my-theme: mat.define-theme((
    typography: (
        plain-family:$my-font-family,
        bold-weight: 900
      ),
  
));
  html {
    // Emit theme-dependent styles for common features used across multiple components.
    @include mat.all-component-themes($my-theme);
  }
  

صرفا جهت اطلاع:

use@ باید در بالای صفحه کد باشد

در فروم های پرسش و پاسخ اصرار بر این بود که باید ~@angular/material/theming را هم اضافه کنید از انحایی که که پس از اضافه کردن دیدم اصلا چنین پوشه ای وجود ندارد و دائم خطا دریافت میکردم،  تاکید بر این بود که من angular material را به درستی نصب نکرده ام و باید ان را دوباره نصب کنم و دوباره نصب میکردم و جواب نمیداد و در انتها با استفاده از کد بالا فونت را به angular material قبولاندم 

برا ی من تا 3صبح زمان برد امیدوارم به کار آید.