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


نویسنده :

تاریخ : 08:12


تعداد بازتاب : 42

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

  • حنانه گفت:

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

    • حسین شفیعیان گفت:

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

      • حنانه گفت:

        من همین کار و میکنم. فونت مخصوص وب استفاده میکنم.
        BMitra.eot
        BMitra.ttf
        BMitra.woff
        BMitra.svg
        BMitra.otf

        • حسین شفیعیان گفت:

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

      • حنانه گفت:

        ممنون

  • الهام گفت:

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

  • وحید گفت:

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

  • zeynab گفت:

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

  • رضا گفت:

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

    • masoudduosam گفت:

      دوست عزیز از طریق دو لینک زیر فونت رو به فرمت های eot و woof تبدیل کنید بعد به روش گفته شده در همین پست به راحتی میتونید از فونت استفاده کنید.
      هر کجا برای هر تگی که خواستید فونت تغییر کنه کافیه که مقدار font-family: iraniansans; رو بهش بدید.

      https://everythingfonts.com/ttf-to-woff تبدیل به woff

      https://everythingfonts.com/ttf-to-eot تبدیل به eot

  • مینا گفت:

    ممنون جواب داد

  • amirapple گفت:

    سلام اجرا نمیشه ؟؟ تمام آیتم ها رو چک کردم درست بود ولی نمیشه …

    • حسین شفیعیان گفت:

      احتمال میدم آدرس دهی فونت ها رو اشتباه دادید

      • amir3d گفت:

        سلام تصحیح این می باشد
        @font-face {
        font-family: ‘Yekan’;
        src: url(‘../fonts/Yekan.eot’);
        src: url(‘../fonts/Yekan.eot?#iefix’) format(’embedded-opentype’),
        url(‘../fonts/Yekan.woff’) format(‘woff’),
        url(‘../fonts/Yekan.ttf’) format(‘truetype’);
        font-weight: normal;
        font-style: normal;
        }

        h1{
        font-family: ‘Yekan’;
        font-size: 14px;
        }
        body{
        text-align:right;
        font-family:Tahoma, Arial, sans-serif;

        }

        body.body-small.fixed-sidebar.mini-navbar #page-wrapper {
        margin: 0 220px 0 0;

        }

        .footer.fixed {

        margin-right: 220px;
        }

        body.fixed-sidebar.body-small.mini-navbar .footer.fixed {
        margin: 0 220px 0 0;
        }

        @media (min-width: 768px) {
        #page-wrapper {

        margin: 0 220px 0 0;

        }

        }

  • محمد مهدی دراج گفت:

    سلام!
    چرا فونتها تو بوت استرپ یا متریال دیزاین گوگل کار نمیکنه؟

    • حسین شفیعیان گفت:

      قالب من الان بوت استرپیه و فونت دلخواهم رو اضافه کردم !
      علتش اینه که قبلا تو این فریم ورک ها font-family ست شده ، باید با !important تو css به دستور خودت ارجعیت بدی ، سرچ کن …

  • Test گفت:

    سلام، لینک فونت ها 404 میده! تصحیح کنید لطفا!

  • پرورش قارچ گفت:

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

  • پدرام گفت:

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

    • حسین شفیعیان گفت:

      سلام پدرام جان
      شما باید فایل های فونت را درون فولدر قالب آپلود کنید و در فایل css قالب فایل های فونت رو فراخوانی کنید

      • پدرام گفت:

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

        • حسین شفیعیان گفت:

          باید در فایل functions.php قالب مورد استفاده ات از تابع wp_enqueue_script استفاده کنی