نصب فونت روی سایت

در این مقاله آموزش قصد داریم که آموزش نصب فونت روی سایت، دانلود فونت برای html و فونت فارسی در css را به همراه یک ویدیوی آموزشی و کاربردی در این خصوص به شما آموزش دهیم، در ادامه مطلب با ما همراه باشید تا نکات لازم در مورد نصب یک فونت مناسب و استاندارد روی وب سایت را بررسی نماییم.

فیلم آموزش نصب فونت روی سایت

کد درج شده در ویدئوی آموزشی را در بخش زیر می توانید استفاده نمایید:

a,body,h1,h2,h3,h4,h5,h6,p,span,input,textarea,ul,li,ol,div {
    font-family: "IranSansWeb" , IranSansWeb !important;
}


@font-face {
  font-family: 'IranSansWeb';
  src: url('#') format('woff2'),
         url('#') format('woff'),
         url('#') format('truetype');
	font-display: swap;
}

در بخش بالا یک ویدیو آموزشی را در اختیار شما قرار داده‌ایم که با کمک این ویدیو آموزشی می‌توانید با نحوه نصب فونت روی وب سایت آشنا شوید، در این ویدیوی آموزشی ما آموزش نصب فونت ایران سنس روی سایت را به شما آموزش میدهیم که این فونت یکی از فونت های بسیار پرطرفدار و زیبای زبان فارسی است که می توانید در وبسایت های خود از آن استفاده نمایید و در وب سایت آموزشگاه آریا تهران نیز از این فونت استفاده شده است.

آموزش نصب فونت روی سایت

همانطور که می‌دانید یک صفحه وب سایت زمانی که طراحی و پیاده‌سازی می‌شود این صفحه حتما باید دارای یکسری استانداردهای ux  و ui باشد تا مخاطب شما زمانی که وارد این صفحه وب سایت می شود به راحتی بتواند با بخش‌های مختلف آن ارتباط برقرار نماید و خدمات و محصولات مورد نظر خود را در یک صفحه وب به راحتی پیدا کند.

یکی از موارد مهمی که به ارتقای استانداردهای طراحی یک صفحه وب کمک می کند این است که از یک فونت مناسب و استاندارد در آن صفحه استفاده شود، استفاده از این فونت به کاربر کمک می کند تا بتواند محتوای صفحه را با خوانایی بهتری درک نماید و آن را مطالعه کند که در ادامه روش اضافه کردن فونت به وب سایت را به شما خواهیم گفت که به چه صورت باید انجام شود.

دانلود فونت فارسی ایران سنس برای سایت

در بخش زیر نیز می توانید فونت فارسی ایران سنس را برای سایت خود دانلود نمایید، البته فونت های فارسی زیادی هستند که شما مطابق سلیقه خود و موضوعی که قصد طراحی سایت در آن حوزه را دارید می توانید از آن استفاده کنید، به عنوان مثال فونت فارسی وزیر، فونت فارسی شبنم و غیره جز فونت هایی هستند که شما در ساختار صفحات وب سایت خود می توانید از آنها استفاده نمایید.

دانلود فونت فارسی برای html

دانلود فونت برای html، در بخش قبلی همانطور که مشاهده کردید لینک دانلود فونت فارسی ایرانسنس در اختیار شما قرار داده شد، به غیر از فونت ایران سنس شما از فونت‌های زیر می توانید در ساختار صفحه html خود استفاده نمایید.

• فونت یکان
• فونت شبنم
• فونت وزیر
• فونت تنها
• فونت ساحل
• فونت صمیم
• فونت پرستو

برای این که یک صفحه ایده آل طراحی نمایید، یکی از نکات مهم استفاده از فونت زیبا و شکیل است، البته شما باید ترفند های آموزش طراحی سایت را نیز بلد باشید تا ساختار صفحه را نیز اصولی طراحی نمایید.

کد فونت نستعلیق در html

در ابتدا شما باید سه نوع فایل woff ،  eot و ttf مربوط به فونت نستعلیق را دانلود نمایید، سپس این فایل‌ها را در درون سرور خود مطابق با ویدیو آموزشی آپلود نمایید و بعد با استفاده از قطعه کد زیر می‌توانید فونت نستعلیق را روی صفحه html خود اعمال نمایید.

@font-face {
  font-family: FontName;
  src: url('FontName.eot');
  src: url('FontName.eot?#iefix') format('FontName-opentype'),
       url('FontName.woff') format('woff'),
       url('FontName.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

دانلود فونت فارسی برای css

فونت فارسی در css هم مطابق با ویدیو آموزشی درج شده در بخش قبلی بر روی سایت اعمال می‌شود و برای ایجاد فونت فارسی گوگل css نیز شما باید مطابق با ویدیو آموزشی درج شده در بخش قبلی این فونت را بر روی سایت خود اعمال نمایید و از قطعه کد زیر هم همانند بخش قبل برای اعمال این فونت روی سایت استفاده کنید، البته در سایت آریا تهران به جز آموزش نصب فونت روی سایت، آموزش های دیگری هم مانند اضافه کردن فونت به ورد وجود دارد که می توانید آن ها را مشاهده نمایید.

اضافه کردن فونت به وب سایت

در بخش قبل یاد گرفتیم که به چه صورت فونت دلخواه را به انواع قالب سایت اضافه نماییم، هر کدام از این فونت ها می تواند جلوه بصری زیبایی را به سایت ما اضافه نماید، اما همان طور که می دانید فونت هایی که ما در وبسایت خود می توانیم استفاده کنیم دارای فرمت های مختلفی می باشند که شما بنا به سلیقه و نظر خود (و موضوعی که قصد ساخت سایت در آن حوزه را دارید) می توانید از هر یک از این فرمت ها بر روی سایت استفاده کنید.

اگر در ویدیو آموزشی نصب فونت در ابتدای مقاله دقت کرده باشید ما فقط از سه نوع فرمت woff ،  woff2 ، و فرمت ttf استفاده شد و این نکته هم گفته شد که به دلیل اینکه حجم فایل های مربوط به فونت روی سایت ما سنگین نشود به همین سه نوع فرمت اکتفا می کنیم و شما هم سعی کنید در ساختار صفحات وب سایت خود این موضوع را رعایت نمایید تا سرعت لود شدن صفحات شما زیاد کند نشود.

فرمت های فونت های وب ( Web Font)

شما در ساختار صفحات وب خود می توانید از فرمت های زیر استفاده نمایید:

• TTF
• WOFF
• WOFF2
• SVG
• EOT

از بین فرمت های ذکر شده فرمت TTF برای تمامی مرورگرهای اینترنت اکسپلورر، گوگل کروم، فایرفاکس، سافاری، اپرا پشتیبانی می شود، فرمت WOFF نیز از تمامی مرورگرها پشتیبانی می کند، اما فرمت  WOFF2  و SVG توسط مرورگر اینترنت اکسپلورر پشتیبانی نمی شوند، و فرمت EOT نیز یکی از فرمت‌های بسیار قدیمی به حساب می‌آید فقط در مرورگر اینترنت اکسپلورر پشتیبانی می‌شود، و مرورگرهای کروم، فایرفاکس، سافاری و اپرا این نسخه را پشتیبانی نمی کنند.

استفاده از فونت‌های گوگل یا google fonts برای وب سایت

Google fonts فونت های متنوع و متعددی را خصوصا برای زبان انگلیسی در اختیار کاربران قرار می‌دهد، که شما اگر علاقه مند به فونت های گوگل هستید می توانید از این فونت ها نیز در ساختار صفحات وب سایت خود استفاده نمایید به خصوص اگر که سایت های انگلیسی زبان می سازید این نوع فونت می‌تواند مناسب باشد.

برای استفاده از گوگل فونت در ساختار سایت شما می توانید فونت‌های گوگل را از فایل CSS با استفاده از دستور زیر فراخوانی نمایید.

@import url(//fonts.googleapis.com/css?family=Open+Sans);