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

font-face
آموزش html & css دسامبر 2013 30

در این روش با css3 فونت های مورد نظرتان را می توانید به قالب سایتتان اضافه کنید. ابتدا باید فونت مورد نظرتان را با 3 فرمت eof برای مرورگر ینترنت اکسپلورر و ttf برای بقیه مرورگرها و woff که با حجم پایین است را داشته باشید. (در پایین صفحه مجموع 40 فونت مشهور با فرمت های لازم موجود است)

بعد از آن کد زیر را در استایل قالبتان کپی کنید :

در خط دوم یک نام را جایگزین newfont کنید ، این نامی است که شما در استایل برای فراخوانی این فونت استفاده می کنید . حالا در خط سوم و چهارم آدرس فونت را با فرمت eof جایگزین آدرس فعلی کنید ، همین کار را برای فرمت woff در خط پنجم و فرمت ttf را در خط ششم انجام دهید.

حالا برای استفاده از این فونت کافی است نامی که در خط دوم برای این فونت وارد کردید را در استایل دهی وارد کنید ، مثل زیر:

 

 

دانلود 40 فونت با سه فرمت
لینک دانلود3 مگابایت
دیدگاه ها
  • siavash می‌گه:

    عالی بود
    فقط فونت ها رو کجا باید اپ کنم؟

    • آقای برنامه نویس می‌گه:

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

      • masoud می‌گه:

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

  • سجاد می‌گه:

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

  • سجاد می‌گه:

    تشکر
    درست شد

  • mahjoob می‌گه:

    سلام با تشكر از مطالب مفيد شما
    من قسمتي رو براي درخواست آموزش نديدم بخاطر همين اين پست درخواست را اينجا كه مرتبط با خواسته من هست (تقريبا) گذاشتم
    من ي قالب با فتوشاپ دارم و ميخوام ازش استفاده كنم اما روششو نميدونم(مطالب زيادي هست خوندم اما تصويري نيست كه بشه باش كار كرد).ميشه شما ي آموزش با اين موضوع بزاريد از تبديل psd به html و قرار دادن در سايت …

    • حسین شفیعیان می‌گه:

      سلام و تشکر
      برای تبدیل psd به html باید مجموعه آموزش html5 و css3 را شروع کنم ، این دو مجموعه منتشر خواهند شد اما کمی با تاخیر چون سایر قسمت های سایت هنوز کامل نشدند و دوستان منتظر سایر ادامه قسمت های این آموزش ها هستند اما در نظر داشتم این آموزش ها را
      موفق باشید

  • حسن می‌گه:

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

    • حسین شفیعیان می‌گه:

      فکر میکنم eot برای اینترنت اکسپلورر ، ttf برای موزیلا و کروم ، woff برای سایرین هست

      • حسن می‌گه:

        ممنون از پاسختون
        من هم همین را میدانستیم ولی چون از ttf استفاده کردم و مرورگر کروم حروف را جدا جدا نشان داد دو به شک شدم
        حالا راهی هست که این حروف جدا جدا درست بشن?
        letter-spacing رو هم صقر px کردم
        ولی در کروم جواب نداد

        • حسین شفیعیان می‌گه:

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

  • حسن می‌گه:

    ممنون درست شد

  • سعید می‌گه:

    سلام و دورد من بر شما
    منظور از استایل قالب همان index.php هست
    خیلی ممنون می شم جوابم را بدهید
    اگه ممکن هست توضیح کامل بدهید که کجا کپی کنیم و در ضمن
    h1{
    font-family: ‘newfont’;
    font-size: 14px;
    }
    کجا نو نوشته شود
    حتما باید h1 نوشته شود

    • حسین شفیعیان می‌گه:

      منظور کد های css یک قالب است که معمولا در فایل style.css قررا میگیرند.
      سوال ئوم ذا دذ انجمن مطرح کنید

  • مهرداد می‌گه:

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

  • سینا می‌گه:

    با سلام. من فونت در در فولدری در روت بنام fonts ریخم ولی باز کار نمی کند.

  • محمد حسن می‌گه:

    حسین جان سلام خسته نباشید ی سوال داشتم متاسفانه لینک انجمن را پیدا نکردم که درانجمن مطرح کنم و اون هم اینه من یک فونت دارم فقط یک فرمت داره نام و فرمتش:A.Mosalas.ttf
    من تو کدهام استفاده کردم کار نکرد می خوام بدونم مشکل از چیه ممنون میشم پاسخ بدید

  • حنانه می‌گه:

    سلام.
    من یه مشکلی با نمایش فونت فارسی در موبایل دارم.
    یکی اینکه ی رو با دو نقطه نمایش میده و اعداد رو انگلیسی نشون میده.
    ممنون میشم راهنماییم کنید

  • الهام می‌گه:

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

  • وحید می‌گه:

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

  • zeynab می‌گه:

    سلام
    ممنون از آموزش هاتون
    فقط من به یه مشکل بر خوردم چرا آیکون هایی مثل فیسبوک و توییتر وقتی فونت تغییر میدم به شکل مربع میشه ؟؟؟

  • رضا می‌گه:

    سلام . من فونت ایران سنس رو خریداری کردم . چجوری باید این فونت رو بدم به استایل وبلاگم . البته برای وبلاگم دامنه خریدم و به ادرس دات ای ار انتقالش دادم . من میخوام بدونم چجوری میتونم از طریق font face فونت سایت یا همون وبلاگ رو تغییر داد و یا اینکه من با این فونت چیکار کنم ؟