جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > وردپرس > نکات برتر برای انتخاب فونت در طراحی سایت

نکات برتر برای انتخاب فونت در طراحی سایت

آبان 28, 1398
وردپرس

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

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

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

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

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

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

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

 

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

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

 

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

همیشه فونتی را انتخاب کنید که در فضای وب بتوان به راحتی آن را درتمام مرور گرها مشاهده کرد. اگر از یک کتابخانه فونت خوب استفاده کنید اطمینان حاصل کنید که دیگر همچین مشکلی نخواهید داشت. استفاده از یک کتابخانه مانند 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 استفاده میکنید حتما کش افزونه را نیز پاک کنید.

 

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

 

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

5/5 - (1 امتیاز)
برچسب ها: fontانتخاب فونت در محتوا نویسیفونت
درباره آتشگاه

آموزش تنها حرفه ای است که حرفه های دیگر را ایجاد می کند. من عاشق این حرفه هستم.

جدیدتر تاثیر تگ ها در وبسایت + اصول یادگیری تگ گذاری در سایت
قبلی آموزش نصب المنتور (جلسه 1)

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

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

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=7857
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.