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


پکیج فونت های مطرح فارسی برای وبسایت ( کیفیت بسیار بالا و اصلاح شده ) + آموزش

پیشنهاد : دانلود پکیج کامل 1700 فونت های فارسی غیر وب 

یکی از مشکلاتی که طراحان سایت با آن روبرو بودند , عدم توانایی انتخاب فونت دلخواه در سالیان پیش در محیط وب بود . طراحان فقط میتوانستند از 3 فونت Tahoma , Arial و Mono Type استفاده کنند .

خوشبختانه چند سالی میشه که با روی کار اومدن Css3 این مشکل به طور کلی رفع شده و طراحان وب به راحتی میتوانند از هر فونتی که دوست دارند در دیزاین خود به کار برده و این فونت ها قابل نمایش برای تمامی مرورگر ها و Device ها می باشند .

اما مشکل بعدی برای این کار , تبدیل فونت ها از فرمت TTF به فرمت های SVG , WOFF , EOT ( برای نمایش در تمامی مرورگرها ) میباشد . وقتی فونت TTF به این فرمت ها تبدیل میشود , فونت های کیفیت بالا به فونت هایی با کیفیت پایین و تقریبا غیر خوانا تبدیل میشود .

برای این ساعت از سایت اسکریپت دات کام , یک پکیج 40 تایی از فونت های تبدیل شده ( با بالاترین کیفیت ) را در اختیار شما عزیزان قرار میدهم که امیدوارم مورد پسند شما قرار گیرد .

این پکیج برای اولین بار با بالاترین کیفیت فونت و کاملا اصلاح شده , به صورت رایگان از این سایت منتشر میشود .

پکیج فونت های مطرح فارسی برای وبسایت

آموزش قرار دادن فونت ها در وب سایت :

ابتدا فونت ها رو در لینک انتهای همین پست دانلود نمایید .

سپس با توجه به نوع فونت دلخواه خود , آدرس های مربوطه را در کد زیر جایگزین نمایید و سپس کل کد را در قسمت Css سایت خود قرار دهید .

توجه : در قسمت font-family اسمی برای فونت خود انتخاب نمایید . طبیعتا بهتر است به همان اسم اصلی فونت باشد . مثلا Nasim .

@font-face {
  font-family: 'نام انگلیسی دلخواه برای فونت';
  src: url('eot آدرس فونت با پسوند') format('eot'),  
       url('woff آدرس فونت با پسوند') format('woff'),
       url('ttf آدرس فونت با پسوند') format('truetype');  
  font-style:normal;
  font-weight:normal;
}

به عنوان نمونه برای فونت نسیم با توجه به این نکته که 3 پسوند فونت نسیم در پوشه font میباشد :

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

حال کافیست در css , هر قسمتی که میخواهیم فونت ما به فونت جدید تغییر پیدا کند , به آن قسمت اتربیوت font-family داده و مقدار ( value ) آن را اسم دلخواهی که قبلا به فونت داده ایم میگذاریم.

به عنوان نمونه میخواهیم تمامی H1 ها از این فونت جدید ( مثلا Nasim ) استفاده نمایند :

h1{
    font-family:Nasim;
}

البته بهتر است بعد از فونت جدید , فونت پیش فرض tahoma را هم بنویسیم تا اگر به هر دلیلی فونت جدید اجرا نشد , از فونت tahoma استفاده شود .

یعنی به صورت زیر :

h1{
    font-family:Nasim, Tahoma;
}

نکته : اگر بخواهیم تمام سایت به طور کلی دارای فونت نسیم باشند , باید به تگ body , این Attribute و Value را بدهیم . یعنی :

body{
    font-family:Nasim, Tahoma;
}

نکته بسیار مهم : در هنگام نوشتن نام فونت ها به حروف بزرگ و کوچک دقت فرمایید . ابتدای هر فونت با حرف بزرگ میباشد , پس باید در css هم به همان صورت نوشت . در صورت عدم انجام این کار , فونت در وبسایت کار نخواهد کرد .

پخش اختصاصی

گرداوری : وحید مجیدی 

دانلود پکیج فونت های مطرح فارسی برای وبسایت

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

47 پاسخ به “پکیج فونت های مطرح فارسی برای وبسایت ( کیفیت بسیار بالا و اصلاح شده ) + آموزش”

  1. mohammad reza khishadeh گفت:

    عالی بود ,خیلی لذت بردم !

  2. محسن گفت:

    سلام دوست عزیز. بوت استرپ اصلا زبان برنامه نویسی نیست. بوت استرپ یک تمپلت یا قالب کامل و ریسپانسیو وب است که پکیجی است از کدهای آماده html5 و css3 و javascript که بسته به سلیقه شما میتواند به هر ظاهر و نمایی شخصی سازی شود. این وب تمپلت میتواند هم برای ساخت وب سایتهای ریسپانسبو و هم برای ساخت اپلیکیشنهای موبایلی با هر سیستم عاملی از اندروید گرفته تا آی او اس و ویندوزفون مورد استفاده قرار گیرد. بوت استرپ ابتدا توسط طراحان توئیتر و برای استفاده همین شبکه اجتماعی طراحی شد اما بعد با توجه به دارا بودن تمامی المانهای مورد نیاز طراحان از منوهای گوناگون گرفته تا لیست ویوهای متنوع و حتی منوهای آبشاری و …. مورد توجه طراحان وب قرار گرفته و تبدیل به خمیر مایه بسیاری از وب سایتها شد. اکنون بوت استرپ تبدیل به رقیب بسیار قدرتمندی برای سایر پلتفرمهای مشابه نظیر جی کوئری موبایل گردیده است. البته جی کوئری موبایل ظاهر چشم نوازتر و جلوه های بصری بیشتری دارد.
    و اما سؤال اصلی شما:
    زبان php یک زبان تحت وب سمت سرور می باشد و از این لحاظ با زبان جاوااسکریپت که یک زبان تحت وب سمت کلاینت میباشد تفاوت بسیار دارد.
    از پی اچ پی برای نوشتن برنامه هایی استفاده میشود که در سمت سرویس دهنده اجرا میشوند مثلا برنامه ای که سرورهای گوگل را کنترل میکنند اما از جاوااسکریپت برای نوشتن کدهایی استفاده میگردد که بر روی کامپیوتر شما و هنگام مرور وب مرورگر را کنترل میکنند. پس می بینید که تفاوت فاحشی دارند. مگر شما میخواهید برای سرورها برنامه بنویسید؟
    اگر قصدتان ساخت وب سایتهای زیبای ریسپانسیو یا اپ های موبایلی زیباست پیشنهاد می کنم از جی کوئری موبایل استفاده کنید. کافیست در اینترنت سرچ کنید:
    Mobile jquery

  3. رضا گفت:

    سلام خسته نباشید ممکنه بنده رو راهنمایی کنید
    css,html رو کامل میدونم و با بوت استرپ در حدی که بتونم سایتی که براساسcss,html پیاده سازی شده رو ریسپانسیو کنم ، آشنایی دارم
    و همینطور تبدیل این سایت ها به ووردپرس. و در حال فراگیر چاوا اسکریپت و جی کوئری هستم
    الان من قصد دارم دوره های php فرا بگیرم ولی نمیدونم چه زبان های دیگه ای پیش نیاز هست تا بعدش به سمتphp برم؟
    چون در بعضی سایت ها گفته شده باید بوت استرپ رو کامل آشنایی داشته باشیم ولی من وقتی درباره این زبان مطالعه کردم خودش یک زبان کامل برای طراحی سایت هست و من کاملا گمراه شدم که….

    • وحید مجیدی صدر گفت:

      سلام دوست عزیزم

      حداقل زبان هایی که باید بدونید html – css – js – php و sql هست

      jquery بسیار مفید و کاربردی هست که کتابخانه ای از جاوا اسکریپت میباشد . کار را بسیییییییار راحت میکند اما شما اگر جاوا اسکریپت را 100% بلد باشید دیگر نیازی به jquery ندارید

  4. محمد گفت:

    سلام
    فون این سایت چیه ایران سنس

    shop.2sweb.ir

  5. علی گفت:

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

    • وحید مجیدی صدر گفت:

      سلام دوست عزیزم

      در روش اول و دوم فقط میتوان از دو فونت tahoma و arial استفاده نمود . چون این دو فونت که قابلیت ساپورت زبان فارسی را دارند , در تمامی ویندوز های قدیمی و جدید موجود می باشد

      اما اگر میخواهید از فونت هایی مانند yekan , titr , homa , vahid و … استفاده نمایید , میبایست حتما با استفاده از @font-face آن را به مرورگر شناخت .

      در اصل این متود باعث میشود تا قونت مورد نظر بر روی مروگر کاربر دانلود و سپس اجرا شود

  6. مریم گفت:

    ممنونم بابت آموزش بخش فونت ها
    عالی بود

  7. ارغوان گفت:

    سلام و وقت بخیر

    من به یه فونت فارسی نیاز دارم که از اعداد فارسی پشتیبانی نکنه و اعداد رو انگلیسی نمایش بده

    امکانش هست فونتی رو معرفی کنید؟

    ممنونم

    • وحید مجیدی صدر گفت:

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

  8. مزه ی اشک - اشعار اهل بیت علیهم السلام گفت:

    سلام.
    ممنونم.

  9. خرید فالوور اینستاگرام گفت:

    سلام: سایت بسیار پرمحتوایی دارید ، بنده برای طراحی بنر احتیاج به فونت دارم ، لطفاً در صورت امکان فونت های مناسب طراحی بنر و اسلاید و… را هم بگذارید.
    سپاسگذارم

    • وحید مجیدی گفت:

      سلام دوست عزیزم

      من متوجه منظورتون نشدم .

      اگر منظورتون فونت های ویندوزی هست , بالای همین مطلب لینکش رو گذاشتم

      1700 فونت فارسی غیر وب

  10. امیر گفت:

    ممنون
    مشکلم حل شد

  11. فرشاد گفت:

    ممنون

  12. بهنام گفت:

    دستت درد نکنه، کاش svg هم میذاشتی ولی

  13. مهدی گفت:

    بعضی فونت ها در سایت ظاهرشون بد شکل میشه برای اصلاح اونها چکار باید کرد؟

    • وحید مجیدی گفت:

      بعضی از فونت ها به دلیل نازک بودنشان در مانیتور هایی که دارای تراکم پیکسلی پایین هستند , زیاد جالب به نظر نمیرسن
      طبیعی هست دوست عزیزم

      سعی کنید برای سایز های بزرگ از این فونت ها استفاده کنید

      مثلا بالای 15 پیکسل

      font-size:15px

  14. sara گفت:

    بسیار مفید بود. بسیار بسیار ممنون :)

  15. داود گفت:

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

    @font-face {
    font-family: ‘Nasim’;
    src: url(‘http://x.com/font/Nasim.eot?#’) format(‘eot’),
    url(‘http://x.com/font/Nasim.woff’) format(‘woff’),
    url(‘http://x.com/font/Nasim.ttf’) format(‘truetype’);
    font-style:normal;
    font-weight:normal;
    }

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

    ممنون

    • وحید مجیدی گفت:

      الان روشی که انتخاب کردین درسته دوستم . دمو بدین ببینم

  16. امیرحسین گفت:

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

    • وحید مجیدی گفت:

      لازم به دانلود نیست . روی تمامی سیستم عامل ها به صورت پیش فرض نصب هست . فقط کافیه بنویسید font-family:tahoma

  17. طراحی سایت گفت:

    ممنون خوب بود
    ولی متاسفانه تنوع فونت های فارسی کم

  18. طراحی سایت گفت:

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

  19. آرش گفت:

    ببخشید آقای مجیدی فونت liner و یک فونت دیگر رو تست کردم خیلی خوب بهینه شده برای وب ولی اعدا فارسی هستند راهی نیست اعدا انگلیسی کنیم

  20. آرش گفت:

    اصلا دلیلی نداره که لینک فونت رو fetch کنی توی گوگل !!

  21. سید یوسف هاشمی گفت:

    آقای مجیدی من مشکل با فایل .woff دارم نمیدونم چرا تو هر سایتی که ازش استفاده میکنم جواب نمیده و به عنوان broken link شناسایی میشه. منظورم فونت شما نیست کلا همیشه همین مشکل رو دارم و هنوز براش جوابی پیدا نکردم و اینکه من .net کار میکنم. به نظر شما میتونه دلیلش کیفیت فونت باشه؟
    ممنون

    • وحید مجیدی گفت:

      من منظورتونو متوجه نشدم . یعنی برای دانلود میزارید ؟

      اگر منظورتون برای فونت سایت هست , به خاطر اینه که بعضی از مرورگر های woff رو ساپورت نمیکنن

      • سید یوسف هاشمی گفت:

        منظورم سایت هایی که برای مشتری طراحی میکنم و به عنوان فونت نوشته توی سایت استفاده میکنم.
        تو هر مرورگری اصلا فرقی نداره جواب نمیده و اینکه وبمستر گوگل و میکروسافت و نرم افزار Acunetix این پسوند رو به عنوان لینک شکسته یا همون broken link شناسایی میکنن در صورتی که کنار اون من همیشه 2 نوع فونت دیگه هم قرار میدم مثل ttf و eot و اینا به خوبی شناسایی میشن
        موندم چرا جواب نمیده

        • وحید مجیدی گفت:

          دوست عزیزم واقعیتش اصلا متوجه حرفتون نمیشم . شما کدش رو توی css وارد میکنید با @font-face

          پس هیچ ربطی به لینک شکسته نداره . چون لینک شکسته برای html هست

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

          در ضمن میتونید از پستی که من در سایت گذاشتم برای آموزش اضافه کردن فونت استفاده نمایید .

          با تشکر

          • سید یوسف هاشمی گفت:

            @font-face {
            font-family: ‘BYekan’;
            src: url(‘/Style/Font/BYekan.eot?#’) format(‘eot’), /* IE6�8 */
            url(‘/Style/Font/BYekan.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url(‘/Style/Font/BYekan.ttf’) format(‘truetype’); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
            }

            @font-face {
            font-family: ‘BKoodakBold’;
            src: url(‘/Style/Font/BKoodakBold.eot?#’) format(‘eot’), /* IE6�8 */
            url(‘/Style/Font/BKoodakBold.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url(‘/Style/Font/BKoodakBold.ttf’) format(‘truetype’); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
            }

          • سید یوسف هاشمی گفت:

            من ان کد رو همیشه و توی همه پروژه هام استفاده میکنم. اگه دقت کنید متوجه میشید که 3 پسوند استفاده میکنم. eot , woff, ttf
            توی یه سری نرم افزار ها و یا وبستر ها میشه تمام آدرس های تولید شده رو شناسایی کرد که ببینیم آیا درست هستند یا نه و اگه جایی مشکل داشته باشه بهمون میگه. مثلا وبمستر گوگل تو قسمت fetch as google آدرس ها رو که فچ میکنم آدرسی که این فونت woff وجود داره رو not found میزنه در صورتی که دقیقا وجود داره
            http://www.darbarg.com/Style/Font/BYekan.woff Font Not found
            حالا این آدرس رو بزن
            http://www.darbarg.com/Style/Font/BYekan.ttf
            دقیقا آدرس دهی جفتشون یک جور هست و کتار همدیگه آپلود شدن. اما نمیدونم چرا فونت با پسوند woff شناسایی نمیشه

          • وحید مجیدی گفت:

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

  22. vahid گفت:

    با سلام و احترام
    آقای مجیدی من هرکاری میکنم فونت سایتم عوض نمیشه
    اکثر قالب هایی که به صورت HTML5 هست فایل css جداگانه برای فونت دارند
    لطفا طریقه عوض کردن فونت اینگونه سایت هارو هم بگید
    یه نمونه ازین قالب هارو گذاشتم واسه دانلود
    ممنون بابت وقتتون
    http://chat.chatcenter.ir/j/HTML.zip

    • وحید مجیدی گفت:

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

  23. مهرادمنش گفت:

    با سلام و احترام
    ممنون استاد

  24. امیر فراهانی گفت:

    عالی بود

  25. وحید مجیدی گفت:

    وظیفس دوستان گلم …

  26. فردین گفت:

    سلام
    واقعا قابل تقدیر بود
    ممنون

  27. شکرگزاری گفت:

    سلام
    خیلی ممنون.

  28. dashesi_lamer گفت:

    عالی بود با سپاس

پاسخ دادن به وحید مجیدی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *