آموزش طراحی وب به زبان ساده

با سلام خدمت دوستان عزیز

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

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

اما چگونه مطمئن شویم فونتی را که انتخاب می کنیم طراحی ما را خراب نمی کند؟ کاری ندارد که تا انتهای این مطلب همراه من باشید تا تمام رمز و راز های این کار را به شما بگویم.

برای انتخاب بهترین فونت باید چکار کنیم؟

کاربران شما چه شخصیتی دارند؟

قبل از شروع یک پروژه به ارزشها و شخصیت تمام کسانی که می خواهند با سایت شما در ارتباط باشند فکر کنید. آیا نوع فونت دوستانه است؟ هوشمند چطور؟ تصور کنیم که شما دارید درباره طراحی سایت آموزش می دهید مخاطب شما اکثرا جوانان هستند. پس باید فونتی را انتخاب کنید که برای این گونه افراد جذاب باشد از فونت های دوستانه استفاده کنید چرا که مردم از سایت های خشک و رسمی خسته شده اند.

ویژگی های بصری را درنظر بگیرید

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

فونت شما باید در تمامی مرورگر ها به درستی کار کند

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

با دقت تست کنید

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

اما چطوری این فونت ها در سایتمان قرار بدهیم؟

شما می توانید از زبان CSS استفاده کنید و از فونت مورد نظرتان در طراحی تان استفاده کنید نمونه کدی که می توانید از آن استفاه کنید.

نحوه اضافه کردن فونت جدید در CSS:

برای اینکه فونت دلخواه خودتان را به سایت اضافه کنید، ابتدا باید فونت مد نظرتان را از طریق سایت هایی که مبدل فونت هستند به سه فرمت رایج وب تبدیل کنید. به این سایت ها Font Converter میگویند. سایت Onlinefontconverter.com برای مثال میتواند انتخاب خوبی باشد. در این سایت با آپلود یک فرمت از فونت دلخواه و با انتخاب فرمت هایی که نیاز دارید میتوانید فونت خودتان را آپلود کنید و سپس با فرمت های درخواستی آنها را دانلود کنید.

پیشنهاد میکنیم به سه فرمت Woff,eot, ttf فونت خود را تبدیل کنید و هر سه را با یک نام در فولدری از هاست خودتان آپلود کنید.

برای مثال سه فونتی که در مسیر پوشه uploads یک سایت وردپرسی ذخیره شده باشند مانند زیر خواهد شد:
  

Example.com/wp-content/uploads/myfont.ttf

Example.com/wp-content/uploads/myfont.woff

Example.com/wp-content/uploads/myfont.eot

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

برای اینکار رشته کد زیر را در فایل rtl.css  و یا style.css  قرار دهید.

اضافه کردن فونت در CSS:

  
@font-face {
font-family: Esmefont;
src: url(https://Example.com/wp-content/uploads/myfont.eot');
src: url('https://Example.com/wp-content/uploads/myfont.eot?#iefix') format('FontName-opentype'),
url(https://Example.com/wp-content/uploads/myfont.woff') format('woff'),
url('https://Example.com/wp-content/uploads/myfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}
   

بعد از این مرحله فقط باید به بخش های مختلف از سایت تان این فونت را نسبت دهید . برای مثال  :
   

Body {
Font-family: Esmefont;
}
H1 {
Font-family: Esmefont;
}

   
ممکن است بعد از انجام این کار تغییری در سایت خودتان نبینید. برای اینکه مطمئن شوید کار را درست انجام داده اید حتما کش مرورگر خودتان را با زدن دکمه های CTRL+F5 پاک کنید و اگر در سایت خودتان از افزونه کش مثل افزونه WP rocket استفاده میکنید حتما کش افزونه را نیز پاک کنید.

با اضافه کردن این کد شما به راحتی می توانید فونت دلخواهتان را در طراحی سایت تان اعمال کنید.

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