ManJo1

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

11 پست در این موضوع

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

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

به عنوان مثال در فریم ورک 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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

سلام

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

شما که فونت ها و استایل رو دارید، همینطور فایل 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';
}

 

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites
در 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 خیلی راحت طبق آموزش خودشون جواب میداد

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites
در در 7/31/2019 در 14:11، pourdaryaei گفته است :

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites
در 9 دقیقه قبل، pourdaryaei گفته است :

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

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

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

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

 

 

Share this post


Link to post
Share on other sites

سلام

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

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites
در 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 هایی است که به فونت میدی.

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

خیلی ممنون

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

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

 

من یه پوشه به اسم فرضی 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;
}

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری