استفاده از فونت مناسب و کار امد در وب سایت امروزه به یک امر بدیهی تبدیل شده است و وبمستران برای زیبا شدن نوشته های سایت خود اقدام به اضافه کردن فونت دلخواه به وب سایت می کنند. شاید برای شما هم این سوال پیش آمده که چگونه میتوان فونت به وب سایت اضافه کرد؟

این کار بسیار آسان است و شما تنها با چند دقیقه ای وقت گذاشتن می توانید این کار را انجام دهید. روش کار بدین صورت است که شما بایستی اول فونت مورد نظرتان را در وب سایت لود نمائید و سپس به استایل سایت خود بفهمانید که این فونت را به عنوان فونت اصلی در نظر بگیر. اما توجه داشته باشید که هر فونتی برای استفاده در وب مناسب نیست و شما باید یک فونت مناسب را انتخاب کنید.

از فونت های فارسی محبوب و کارآمد برای وب سایت ها می توان فونت یکان، فونت ایران سنس، فونت ایران یکان و… اشاره کرد که امروزه در وب فارسی استفاده می شوند.

مراحل اضافه کردن فونت به سایت:

۱- آپلود فونت در یکی از دایرکتوری های سایت:

شما بایستی ابتدا فایل فونت را در یک دایرکتوری مشخص در وب سایت خود آپلود نمائید.

توجه داشته باشید که فونت های مخصوص وب باید فرمت های TTF, OTF, WOFF, WOFF2, SVG, EOT را داشته باشد که هر فرمت می تواند در مرورگر مشخص یا دیوایش مشخصی کاربرد داشته باشد. که در تصویر زیر می توانید لیست این موارد را مشاهده کنید.

اگر برای دیوایس یا مرورگری وب فونت مخصوص آن تعریف نشود از فونت های دیفالت استفاده میشود، برای همین است که دولوپر ها در زمان اعمال فونت سعی می کنند فونت دیگری نیز معرفی کنند. برای مثال تکه کد زیر رو نگاه کنید. در این کد در صورت لود نشدن فونت ایران سنس در یکی از مرورگرها یا دیوایس ها فونت تاهوما جایگزین آن خواهد شد.

body {font-family: iransans , Tahma;}

۲- لود فایل های فونت و تعریف آن:

شما بایستی به استایل سایت خود فونت های دلخواه را لود نمائید تا در تمامی وب سایت شما این فونت قابل شناسایی باشد. این کد های بایستی در فایلی با پسوند CSS اضافه شود.

@font-face {font-family: 'FontName';src: url('assets/fonts/webfont.eot');/* IE9 Compat Modes */src: url('assets/fonts/webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('assets/fonts/webfont.woff2') format('woff2'),/* Super Modern Browsers */url('assets/fonts/webfont.woff') format('woff'),/* Pretty Modern Browsers */url('assets/fonts/webfont.ttf')format('truetype'),/* Safari, Android, iOS */url('assets/fonts/webfont.svg#svgFontName') format('svg');/* Legacy iOS */}

۳- اعمال فونت:

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

body {font-family: FontName , Tahma;}

فونت های گوگل:

گوگل سرویسی ارائه میدهد به نام Google Fonts که فونت های بسیاری را در اختیار شما قرار میدهد تا بدون مشکل بتوانید از فونت های مختلف در وب سایت استفاده نمائید. بیشتر هم فونت های لاتین در ان وجود دارد اما می توان چند فونت فارسی نیز پیدا کرد.

برای این منظور کد زیر را در فایل CSS خود اضافه کنید:

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

امید است این آموزش مفید واقع شده باشد.

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

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