آموزش افزودن فونت به فریم ورک های طراحی قالب جوملا – Warp و Gantry و T3

افزودن فونت به قالب جوملا

بعد از راست چین (rtl)  کردن یک قالب ، مهمترین دقدقه طراحان سایت و قالب اضافه کردن فونت هایی است که با زبان فارسی سازگاری بیشتری داشته باشند. البته با توجه به راست چین بودن تمام فریم ورک های طراحی قالب ، افزودن فونت ، تبدیل به اولین موضوع برای  فارسی سازی قالب میشه.


آموزش و راهنما های زیادی برای اضافه کردن فونت دلخواه برای قالب های جوملا وجود داره، اما اکثر این اموزش ها فقط درباره اضافه کردن فونت به قالب های معمولی جوملا (منظور قالب های بدون فریم ورک است) صحبت میکنند ، اما من در این پست قصد دارم نحوه اضافه کردن فونت های فارسی دلخواه به قالب های طراحی شده با فریم ورک های طراحی قالب جوملا مثل warp  و Gantry و T3 و … رو برای شما شرح بدم و اول از همه از فریم ورک مورد علاقه خودم ، یعنی Warp شروع میکنم.
اموزش اضافه کردن فونت به فریم ورک های دیگه ، به مرور به این پست اضافه  و یا در یک پست جدید منتشر میشود.

مرحله اول ، نصب قالب

برای شروع، لازمه که ما یک قالب طراحی شده با فریم ورک وارپ رو نصب کنیم. قالب های شرکت Yootheme و بعضی شرکتهای دیگه از این فریم ورک استفاده میکنند،.
من نسخه خام فریمورک Warp (بسته نصبی رایگان فریم ورک) که به  صورت Quickstart منتشر شده و از لینک زیر قابل دریافت هست رو روی لوکال نصب میکنم. (قالب رایگان master 2 رو دانلود کنید)

http://yootheme.com/themes/downloads/download


بعد از نصب ، من چند منو و مطلب رو فارسی میکنم  (مثلا منوی Home رو به صفحه نخست و …) تا بعد از اضافه کردن فونت فارسی ، بتونیم تغییر رو مشاهده کنیم.

 

مرحله دوم ، دانلود فونت و افزودن به پوشه قالب

خوب حالا برای اضافه کردن فونت ها ، به اولین چیزی که نیاز داریم ، فونت های فارسی بهینه شده برای وب است. من برای این اموزش از فونت بهینه شده یکان (B Yekan)  استفاده میکنم. میتونید این فونت رو از لینک زیر دریافت کنید:

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


بعد از دانلود فونت ها ، به پوشه قالبی که نصب کردید رفته و یک پوشه با نام fonts در این محل ایجاد کنید. برای مثال نام پوشه قالب من yoo_master2 است پس باید به مسیر زیر برم و پوشه fonts رو ایجاد کنم:

Templates/yoo_master2

حالا فونتهایی رو که دانلود کرده بودید رو در این پوشه کپی کنید.

 

مرحله سوم ، معرفی فونت به قالب

بعد از کپی فونتها، باید فونت ها رو به قالب معرفی کنیم ، به پوشه less در قالب برید فایل theme.less رو با یک ویرایشگر متن (کد) مثل notpadd ویا Dreamwiver باز کنید.
کد زیر رو به ابتدای فایل اضافه کنید:




	@font-face {

	    font-family: 'wyekan';

	    src: url('../fonts/WebYekan.eot');

	    src: url('../fonts/WebYekan.eot?#iefix') format('embedded-opentype'),

	         url('../fonts/WebYekan.woff') format('woff'),

	         url('../fonts/WebYekan.ttf') format('truetype'),

	         url('../fonts/WebYekan.svg#KreonRegular') format('svg');

	    font-weight: normal;

	    font-style: normal;

	}

کد فونت فیس در less

توجه کنید که در مقابل font-family از wyekan استفاده کردیم، این نامی است که ما برای فونتمون در هنگام فراخوانی استفاده میکنیم ، این نام میتونه یک کلمه دلخواه باشه ، اما باید در مرحله بعد هم از همین نام استفاده کنیم.
فایل رو ذخیره کنید و ببندید ، دیگه با این فایل کاری نداریم.

حالا فایل customizer.json موجود در پوشه less رو با یک ویرایشگر کد باز کنید. باید فونت مورد نظر رو از قسمت "type": "font" در حدود خط ۲۰ اضافه کنید ، درست در جایی مه System Fonts تمام میشه کد زیر رو به فایلتون اضافه کنید:


	"Custom Fonts": [

	                        {"name": "yekan", "value": "WYekan , tahoma"}

	                    ],

طبق عکس زیر عمل کنید:

معرفی فونت

 

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

مرحله چهارم ، تنظیم فونت قالب روی فونت مورد نظر

وارد مدیریت جوملا بشید و از مدیریت قالب ها ، قالب مورد نظر (اینجا ما از قالب خام فریم ورک با نام yoo_master2 استفاده کردیم ) رو انتخاب کنید.
بعد از ورود به تب Options   برید و Settings رو انتخاب کنید، حالا از قسمت Development روی گزینه Compile LESSکلیک کنید و صبر کنید تا مراحل کامپایل less تمام بشه (معمولا چند ثانیه طول میکشه)
بعد از اتمام ، از قسمت Styles روی Customizer کلیک کنید.بعد از کلیک روی این قسمت ، یک صفحه جدید باز میشه که میتونید قسمتهای مختلف قالب رو ویرایش کنید.

 

مدیریت warp

در ستون سمت چپ ، گزنه  Advanced Mode رو فعال کنید، حالا از قسمت Typography گزینه body font family و heading font family رو باز کنید و گزینه yekan رو پیدا و انتخاب کنید.
 به پایین تر اسکرول کنید و گزینه Navbar رو پیدا کنید و nav font family رو روی yekan تنظیم کنید.

فونت فارسی

حالا روی دکمه ابی رنگ save کلیک کنید و منتظر بمونید فایلها ذخیره بشوند.
تمام شد، شما فونت yekan رو به فریمورک Warp اضافه کردید، توجه کنید که این روش بر روی قالب های وردپرسی که با warp طراحی شده باشند هم قابل اجراست.


منتظر اموزش های بعدی باشد…

اموزش افزودن فونت به گانتری ، اضافه شد

نظرات (28)

  • Avatar

    nahid

    |

    با سلام
    برایافزودن فونت به قالب فریم ورک t3 هر کاری میکنم ولی فونت مود نظرم اعمال نمیشه
    تغییری بوجود نمیاد
    من موندم مشکلم از چیه

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      این اموزش برای فریمورک وارپ بود.
      روش افزودن فونت به t3:
      http://www.t3-framework.org/documentation/bs3-customization#add-fonts
      موفق باشید

      Reply

  • Avatar

    اسماعیل عباسی

    |

    The uploaded file exceeds the upload_max_filesize directive in php.ini.
    این مشکل چطور حل میشه ؟

    Reply

    • Avatar

      Karim Ezoji

      |

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

      Reply

  • Avatar

    mahdiyar

    |

    باسلام
    من کاملا تمامی مراحل بالا را به صورت صحیح انجام داده ام اما بعد از کامپایل less با این ارر مواجه می شم

    Error

    Unable to retrieve /en/templates/yoo_organic/less/customizer.json (SyntaxError: Unexpected string in JSON at position 93600)

    که این پوزیشن ۹۳۶۰۰ جالب بود…

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      فایل customizer رو یک جا اپلود کنید و لینک دانلود رو کامنت کنید.

      Reply

  • Avatar

    rojh

    |

    سلام
    ممنون از بایت آموزش خوبتون
    ببخشید تو انجمن جوملا فارسی آموزش اضافه کردن به قالب هلیکس رو دیدم و تغییرات رو هم اعمال کردم ولی تغییری ایجاد نشد . میشه راهنمایی بفرمایید .
    با تشکر

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      قبلا مراحل افزودن فونت به اخرین نسخه هلیکس رو برای یکی از کاربر ها توضیح داده بودم که اینجا هم قرار میدم:
      ۱- یک فونت فارسی در پوشه فونت قالب کپی کنید. (فرض میکنیم فونتی با نام WebYekan.woff در این پوشه کپی کردید)
      ۲- فایل theme.less رو در پوشه less با یک ویرایشگر باز کنید. . کد زیر رو به اون اضافه کنید.

      font-family: ‘yekan’;
      src: url(‘../fonts/WebYekan.woff’) format(‘woff’);
      font-weight: normal;
      font-style: normal;
      }

      ۳- فایل webfonts.json در پوشه webfonts رو باز کنید و در قسمت "items": [ میتونید فونت ها و اپشن های فونت موردنظر رو اضافه کنید.

      ۴- به مدیریت قالب برید و فونت یکان رو برای بخش های مختلف انتخاب کنید.
      تمام شد!

      موفق باشید

      Reply

      • Avatar

        rojh

        |

        از مورد ۳ به بعدش رو نفهمیدم ؟
        پوشه فایل webfonts.jsonرو پیدا نمیکنم اخه .
        شرمنده

        Reply

        • Avatar

          Karim Ezoji

          |

          از کدوم نسخه هلیکس استفاه میکنید.
          این اموزش برای هلیکس ۳ بود (البته این اموزش مربوط به چند ماه قبل هست)
          شاید لینک زیر بتونه کمکتون کنه:
          https://www.joomshaper.com/documentation/helix3/how-to-new-font-to-helix3-template

          Reply

  • Avatar

    Zavash

    |

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

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام عزیز
      احتمال خیلی زیاد ماژول از css های داخلی استفاده میکنه. شما باید با فایرباگ قسمت مورد نظر رو بررسی کنید و فونت رو برای همین قسمت ست کنید.

      Reply

  • Avatar

    Zavash

    |

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

    Reply

    • Avatar

      Karim Ezoji

      |

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

      Reply

      • Avatar

        Zavash

        |

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

        Reply

        • Avatar

          Karim Ezoji

          |

          سلام
          بعد از افزودن فونت اول، تمام مراحل ذکر شده در اموزش رو مجددا برای فونت دوم انجام بدید.
          موفق باشید

          Reply

  • Avatar

    محسن

    |

    سلام
    ممنون از آموزش خوبتون
    من همین کارها رو انجام دادم . البته ۵تا فوت اضاف کردم!
    ولی وقتی روی گزینه Compile LESSکلیک میکنم خطای زیر رو میده
    theme.less
    missing closing `}`
    وقتی هم از قسمت Styles روی Customizer کلیک میکنم خطای زیر رو
    Error

    Unable to retrieve /templates/yoo_avion/less/customizer.json (SyntaxError: Unexpected token { in JSON at position 1495)

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

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      دقیقا در ارور مشخص هست که شما کدی که در less نوشتید رو درست نبستید "}".
      و همچنین در customizer از کدهای ولید استفاده نکردید!
      خطوطی که اضافه کردید رو کاملا بررسی کنید و یا مجددا اقدام کنید.
      موفق باشید

      Reply

  • Avatar

    بهنام

    |

    بی نهایت سپاسگذارم. عالی بود.

    Reply

  • Avatar

    av_admin

    |

    سلام
    نحوه افزودن فونت های ایران سنس که در سایتش به مبلغ ۳۸هزار تومان فروخته میشه رو هم می شه در قالب وارپ ۷ توضیح بدین ؟
    شرکت سازنده فونت خودش هیچ اطلاعاتی در باره جوملا نداره و نمیتونه کمکی کنه

    Reply

    • Avatar

      Karim Ezoji

      |

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

      Reply

  • Avatar

    هیراد

    |

    واقعا دستتون درد نکنه یک موضوعی که بعد از خواندن هزارتا مطلب بی سرو ته نتونسته بودم انجام بدم رو با آموزش شما کمتر از ۵ دقیقه انجام دادم … ممنون

    Reply

  • Avatar

    رضا

    |

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

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      با این فریمورک اشنایی ندارم، اما سعی میکنم روش این کار رو پیدا و در یک پست منتشر کنم
      موفق باشید

      Reply

  • Avatar

    رحیم محمدی

    |

    بعضی وقتا نمیتونیم اونطور که باید از یه نفر که کمکت کرده تشکر کرد . ممنونم

    Reply

    • Avatar

      Karim Ezoji

      |

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

      Reply

  • Avatar

    سینا

    |

    عالیییییییییییی بود ممنوون
    برای بقیه ی فریم ورک ها هم بزارین

    Reply

    • Avatar

      karim ezoji

      |

      سلام
      بزودی اموزش برای فریمورک های دیگه هم اضافه میشه.
      موفق باشید

      Reply

دیدگاهتان را بنویسید

قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

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

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!