افزودن فونت به yootheme pro

[ManJo1 28]

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

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

به عنوان مثال در فریم ورک yootheme pro داخل این لینک آموزش داده شده که چطوری باید یک فونت رو به فریم ورک اضافه کرد... متن آموزش این هست:

 

To add custom fonts in your child theme, create a /fonts folder inside your child theme directory and put your font files there. Now add a @font-face rule to the child theme's /css/custom.css and reference the font files. For example:

@font-face {
    font-family: 'my-custom-font';
    src: url('../fonts/my-custom-font.eot');
    src: url('../fonts/my-custom-font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/my-custom-font.woff') format('woff'),
         url('../fonts/my-custom-font.ttf') format('truetype'),
         url('../fonts/my-custom-font.svg#mycustomfont') format('svg');
}

To apply the font to HTML elements or CSS components, go to the style customizer and open the font picker. Instead of selecting one of the proposed fonts, type the full name of your custom font inside the search field and hit enter.

 

من فونت B yekan رو از داخل پوشه ی fonts در سایت transfonter آپلود کردم و یک فایل زیپ به من تحویل داد (اصل فونت و این فایل رو ضمیمه کردم) که داخل اون فرمت های مختلف فونت من و یک استایل شیت بود که متن داخل استایل شیت رو با کمی تغییر داخل فایل custom.css پیست کردم ... به این شکل:

@font-face {
    font-family: 'B Yekan';
    src: url('../fonts/BYekan.eot');
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BYekan.woff2') format('woff2'),
        url('../fonts/BYekan.woff') format('woff'),
        url('../fonts/BYekan.ttf') format('truetype'),
        url('../fonts/BYekan.svg#BYekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

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

من حتی حالت های دیگه ای از کد رو هم برای تست در داخل فایل custom.css قرار دادم مثلا یکبار قسمت font-weight: normal;
    font-style: normal; رو حذف کردم ... ولی اثری نداشت یکبار برای آدرس دهی .../fonts رو حذف کردم بازم اثری نداشت ... 

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

 

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

 

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

 

تشکر

transfonter.org-20190729-155814.zip

اصل فونت.zip

[pourdaryaei 154]

سلام

واقعا نیازی به اینهمه کارها نیست.

شما که فونت ها و استایل رو دارید، همینطور فایل custom.css رو هم دارید، یه پوشه فونت بیرون پوشه استایل بساز و فونتها رو توش بریز ، فایل custom.css رو ویرایش کن و محتوای استایلت رو اول اون فایل قرار بده.

حالا المنت هایی که نیاز هست فونتش رو عوض کنی توی همون فایل سفارشی عوض کن.
 

/fonts/

/style/

/style/custom.css/

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

@font-face {
    font-family: 'B Yekan';
    src: url('../fonts/BYekan.eot');
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BYekan.woff2') format('woff2'),
        url('../fonts/BYekan.woff') format('woff'),
        url('../fonts/BYekan.ttf') format('truetype'),
        url('../fonts/BYekan.svg#BYekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{

	font-family: 'B yekan';
}
p,h1,h2,h3,h4 ... {
	font-family: 'B yekan';
}

 

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

[ManJo1 28]

در 14 ساعت قبل، pourdaryaei گفته است :

سلام

واقعا نیازی به اینهمه کارها نیست.

شما که فونت ها و استایل رو دارید، همینطور فایل custom.css رو هم دارید، یه پوشه فونت بیرون پوشه استایل بساز و فونتها رو توش بریز ، فایل custom.css رو ویرایش کن و محتوای استایلت رو اول اون فایل قرار بده.

حالا المنت هایی که نیاز هست فونتش رو عوض کنی توی همون فایل سفارشی عوض کن.
 

/fonts/

/style/

/style/custom.css/

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

@font-face {
    font-family: 'B Yekan';
    src: url('../fonts/BYekan.eot');
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BYekan.woff2') format('woff2'),
        url('../fonts/BYekan.woff') format('woff'),
        url('../fonts/BYekan.ttf') format('truetype'),
        url('../fonts/BYekan.svg#BYekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{

	font-family: 'B yekan';
}
p,h1,h2,h3,h4 ... {
	font-family: 'B yekan';
}

 

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

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

من یک پوشه ی template دارم که داخلش قالب هام هست .. یکی از پوشه هام yootheme هست که داخلش این پوشه ها هست: cache و css و fonts و html و js و  language و less و template و vendor و یه تعدادی فایل ... الان پوشه ی استایل باید توی کدوم مسیر باشه؟

 

بعد یه نکته ی دیگه اینکه این قسمت از کدتون 

body{

	font-family: 'B yekan';
}
p,h1,h2,h3,h4 ... {
	font-family: 'B yekan';
}

 توی آموزش رسمی خود سایت نیست ... ... یعنی در واقع سوالم اینه که چرا وقتی طبق آموزشی که خودشون نوشتن پیش میرم جواب نمیده؟ در مورد sp pagebuilder هم همین مشکل بود یعنی طبق آموزش خودشون پیش میرفتم ولی جواب نمیداد ولی gantry و gridbox خیلی راحت طبق آموزش خودشون جواب میداد

[pourdaryaei 154]

همون پوشه template هست که من نوشتم استایل.

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

فقط فونت ها به قالب اضافه میشه ولی فونت هایی که استفاده میشه همونهایی هست که پیش فرض معرفی شدند برای المنها مثلا Verdana یا هرچیز دیگه ، شما باید فونت رو اضافه کنید و از این طریق از فونت اضافه شده استفاده کنید.

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

البته خوبی یه صفحه سازی مثل Gridbox اینه که نیازی به این کارها نداره و شما میتونی فونت رو به کتابخونش اضافه کنی و از اونجا فراخوانی کنی و فایل سفارشی هم میتونی خودکار همزمان بنویسی و بصورت زنده تغییرات رو ببینی.

البته من با بقیه کار نکردم و نمیدونم چطور عمل میکنند

[ManJo1 28]

در در 7/31/2019 در 14:11، pourdaryaei گفته است :

همون پوشه template هست که من نوشتم استایل.

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

فقط فونت ها به قالب اضافه میشه ولی فونت هایی که استفاده میشه همونهایی هست که پیش فرض معرفی شدند برای المنها مثلا Verdana یا هرچیز دیگه ، شما باید فونت رو اضافه کنید و از این طریق از فونت اضافه شده استفاده کنید.

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

البته خوبی یه صفحه سازی مثل Gridbox اینه که نیازی به این کارها نداره و شما میتونی فونت رو به کتابخونش اضافه کنی و از اونجا فراخوانی کنی و فایل سفارشی هم میتونی خودکار همزمان بنویسی و بصورت زنده تغییرات رو ببینی.

البته من با بقیه کار نکردم و نمیدونم چطور عمل میکنند

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

[pourdaryaei 154]

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

[ManJo1 28]

در 9 دقیقه قبل، pourdaryaei گفته است :

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

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

بازم ممنونم ... نسخه ی فریم ورکی که الان مشغول کار روش هستم رو هم آپلود کردم اگر وقت داشته باشید چک کنید که عالی میشه:

http://s9.picofile.com/file/8368495800/yootheme_pro_1_21_0.zip.html

 

 

[pourdaryaei 154]

سلام

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

فونت وزیر رو کپی کردم توی فولدر fonts که خودش توی پوشه قالب داره، یه فایل به نام custom.css هم توی فولدر CSS ها درست کردم و کد زیر رو توش اضافه کردم.

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

body{
	direction: rtl;
	font-family: 'Vazir';
}

حالا میاد فونت رو میخونه و اعمال میکنه، البته این فقط قسمت کوچکی از دستورات CSS هست که باید توی فایل Custom بنویسی و تغییرات دیگه هم بایستی توی همین فایل انجام بدی.

به هرحال مسئله اصلی آدرس URL هایی است که به فونت میدی.

[ManJo1 28]

در 10 ساعت قبل، pourdaryaei گفته است :

سلام

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

فونت وزیر رو کپی کردم توی فولدر fonts که خودش توی پوشه قالب داره، یه فایل به نام custom.css هم توی فولدر CSS ها درست کردم و کد زیر رو توش اضافه کردم.

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

body{
	direction: rtl;
	font-family: 'Vazir';
}

حالا میاد فونت رو میخونه و اعمال میکنه، البته این فقط قسمت کوچکی از دستورات CSS هست که باید توی فایل Custom بنویسی و تغییرات دیگه هم بایستی توی همین فایل انجام بدی.

به هرحال مسئله اصلی آدرس URL هایی است که به فونت میدی.

خیلی ممنون که وقت گذاشتید و چک کردید ... منم مجدد میرم امتحان می کنم 

خیلی ممنون

[pourdaryaei 154]

امیدوارم جواب بگیرید، چون برا من که مشکلی نداشت و اگر اسم فونت و آدرس رو درست بنویسید و فونت فامیلی المنت ها رو هم بدرستی عوض کنید نتیجه ش حتمیه

[ManJo1 28]

سلام وقت همگی به خیر ... 

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

 

من یه پوشه به اسم فرضی pfonts ساختم (به جزfonts)  و فونت هایی که اسمشون رو گزاشته بودم p30 (در واقع فونت ایران سنس بود ولی اسمشو گزاشتم p30 که کوتاه تر باشه) رو داخل اون پوشه ی pfonts ریختم ... و داخل پوشه ی css داخل فایل custom.css این کد ها رو قرار دادم:

@font-face {
  font-family: 'p30';
  font-style: bold;
  font-weight: 700;
  src: url(../pfonts/p30.eot);
  src: url(../pfonts/p30.eot?#iefix) format('embedded-opentype'),
       url(../pfonts/p30.woff2) format('woff2'),
       url(../pfonts/p30.woff) format('woff'),
       url(../pfonts/p30.ttf) format('truetype');
}

p,h1,h2,h3,h4,h5,h6,a,ul,div,tr,td,input{
font-family: "p30" !important;
}

body *{
    
    letter-spacing:0  !important;
}

.uk-h1, h1 , .uk-heading-hero {
    font-size: 30px !important;
}

 امید وارم این روش کاربردی باشه