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

آموزش 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 فونت سایت یا همون وبلاگ رو تغییر داد و یا اینکه من با این فونت چیکار کنم ؟


Time limit is exhausted. Please reload CAPTCHA.