رفتن به مطلب

آموزش عوض کردن فونت سایت


پست های پیشنهاد شده

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام دوست عزیز . من نمیدونم تا چه حد آشنا هستید به تغییرات تو css ولی

خلاصه میگم اگر متوجه نشدین بگید تا اگه تونستم خودم یا سایر دوستان

راهنمایی کنند .

برای اضافه کردن فونت شما باید این مراحل را در پرستا 1.6 قالب پیشفرض بری که البته توی سایر قالب هام اکثر مراحل یکی هست .

 

 

1 . اول شما باید نسخه ویرایش شده و مخصوص وب فونتی را که احتیاج دارید از نت دانلود کنید با سه پسوند ttf , woff و eot

 

2.

حالا باید این فونت ها را داخل یک پوشه به طور مثال font داخل پوشه قالبت

آپلود کنی . در واقع برای هر فونت 3 فایل با سه پسوند آپلود میکنی.

 

3.

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

تکنیک @font-face استفاده کنی .که برای این کار به پوشه قالب سایتت میری و

سپس به پوشه css . در اونجا باید کد زیر را داخل یکی از فایل های css که

توی تمام صفحات لود میشه قرار بدی که دوستان پرستاشاپ فارسی این کار را در

فایل fa.css انجام دادند و تعدادی فونت فارسی هم در ویرایش دومشون به قالب

اضافه کردند .

 

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

که

در اینجا به جای fontname که در سطر دوم هست نام فونت را قرار میدین و این

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

در جلوی font-family : باید تایپ کنید .

و به جای fontname folder نام

پوشه ای که داخل پوشه font داخل قالبتان برای فونت مورد نظر ایجاد نموده

اید را وارد نمایید که البته اگر فونت ها را بدون پوشه بندی داخل پوشه font

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

به طور مثال برای فونت Bhoma دوستان پرستا شاپ فارسیی این کد را قرار دادند .

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

, و سه فایل با سه پسوند مختلف از فونت Bhoma را در این مسیر در داخل پوشه قالب پیشفرض ریختند . font>>bhoma

 

4

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

font-family : در فایل css نام همون فونت را دقیقا مطابق نامی که در بالا

نوشتید تایپ کنید .

و یا برای تغییر کل فونت ها به فونت مورد نظرتون

شما میتونید در پایان همین فایل fa.css به جای سه فونت Droid Naskh و bhoma

, Droid Kufi نام فونت های خودتون را روبروی font-family : جایگزین کنید .

 

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

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

در واقع فقظ کافیه کد هر فونت را داخل فایل fa.css قرار بدین که میشه همون

مرحله 3.

امیدوارم متجه بشید و کمکی تونسته باشم بکنم و اگر گویا نبود و مشکل داشت شرمنده همه ی دوستان هستم .

 

font-web.zip

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام

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

 

موفق باشید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

فایل fa.css در قالب پیش فرض نسخه ۱.۶ رو ببینید. فقط تغییرات فونت در این فایل هست و میتونید نام و مسیر فونت ها رو تغییر بدید

 

Sent from my Xperia using Tapatalk pro

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

فایل fa.css در قالب پیش فرض نسخه ۱.۶ رو ببینید. فقط تغییرات فونت در این فایل هست و میتونید نام و مسیر فونت ها رو تغییر بدید

 

Sent from my Xperia using Tapatalk pro

 

با سلام به دوستان

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

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

دومی هم اینکه بی کودک بلد، رو سایت شهر 24 داره استفاده می کنه، ولی توی عکس که پیوست کردم، فونتی شبیه Times New Roma ورد هست!

منو افقی رو ببینین

post-3381-14373020231934_thumb.jpg

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

اینم کد fa.css که برای عکس بالاست

/* change 'BKoodakBold' font with another local font */

@font-face {

font-family: 'BKoodakBold’;

src:url('fonts/BKoodakBold.eot?#’) format(‘eot’),

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

url(‘fonts/BKoodakBold.ttf’) format(‘truetype’);

}

 

 

 

body, #page {

font-family: 'BKoodakBold';

font-size: 13px;

}

 

.price,.price.product-price, .old-price, .product-price, .price-percent-reduction, .our_price_display, #reduction_percent_display, #old_price_display, .price-discount,

#cart_summary tfoot td.total_price_container span,

#cart_summary tfoot td#total_price_container {

 

font-family: 'BKoodakBold';

}

 

#home-page-tabs > li a, .block .title_block, .block h4, .page-heading, .page-subheading,

h3.page-product-heading, .footer-container #footer h4, .cart_voucher h4, #pagenotfound .pagenotfound h1,

#pagenotfound .pagenotfound p, #facebook_block h4, #cmsinfo_block h3, #center_column .page_product_box h3, #instant_search_results a.close, .page-heading span.heading-counter,

.block .products-block .price-percent-reduction, .sale-label, .new-label,

.price-percent-reduction.small, .button.lnk_view, .button.ajax_add_to_cart_button,

.button.button-small {

 

font-family: 'BKoodakBold';

 

}

 

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

font-family: 'BKoodakBold'!important;

zoom: 90%;

}

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

شما این فونت ها رو دقیق در کجا آپلود کردین؟ در مرورگر خطاهای ۴٠۴ روهنگام لود صفحه چک کنید. در مرورگر کروم در بخش کنسول میشه دید

 

Sent from my Xperia using Tapatalk pro

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای این که ببینید فونت ها لود میشن یا خطای ۴٠۴ میده.

اگر در مسیر درست آپلود نکرده باشین ۴٠۴ میگیرین

به حرف s آخر فونت در کدهاتون دقت کنید. به نظرم فونت ها رو در جای درست نذاشتین و وقتی از ../ هم استفاده نکردین یعنی پوشه فونت باید داخل پوشه css باشه یا fa.css رو اصلاح کنید

 

Sent from my Xperia using Tapatalk pro

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

پروژه شد، نمی خوام مزاحم وقت دوستان شم ولی چند تا راه رفتم بن بست بود

1.

/* change 'BKoodakBold' font with another local font */

@font-face {

font-family: 'BKoodakBold’;

src:url('font/BKoodakBold.eot?#’) format(‘eot’),

url('font/BKoodakBold.woff') format('woff'),

url(‘font/BKoodakBold.ttf’) format(‘truetype’);

}

 

2.

/* change 'BKoodakBold' font with another local font */

@font-face {

font-family: 'BKoodakBold’;

src:url('fonts/BKoodakBold.eot?#’) format(‘eot’),

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

url(‘fonts/BKoodakBold.ttf’) format(‘truetype’);

}

 

3.

/* change 'BKoodakBold' font with another local font */

@font-face {

font-family: 'BKoodakBold’;

src:url('fonts/BKoodakBold.eot?#/..’) format(‘eot’),

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

url(‘fonts/BKoodakBold.ttf/..’) format(‘truetype’);

}

 

یه کار دیگه هم کردم پوشه فونت رو کلا داخل پوشه css کپی کردم

 

کنسول کروم رو کار نکردم نمی دونم کجاشه ولی توی کروم هم شبیه همین عکس هست که گذاشتم

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

یه سوال کوچیک شاید بی تاثیر باشه ولی میخوام بدونم شما الان یعنی فایلی به نام BKoodakBold.eot و دو پسند دیگه را در پوشه css/fonts داری و هنوز فونت ها تغییر نکرده . منظور اصلیم اینه که حروف بزرگ و کوچیک در نام فایل فونت و نام درج شده در مسیر دقیقا یکیست؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بله ، دقیقا این فایل رو دارم در پوشه font

یعنی css/font

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

روش 1 هم آدرس فونت رو دادم! نه فونتز


مشکل حل شد

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

از آقا دانوش و دوست اصفهانی مون مهران جو ممنون، امداد غیبی آقا بهمن هم که کار اصلی رو کرد

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 4 weeks later...

ممنون میشم دوستان اگه پستی هست یا آموزشی در مورد عوض کردن فونت نوشته های سایت راهنمایی کنید ...

 

ممنون از دوستان و مدیران :shy:

سلام!

 

به این پست مراجعه کن، پیام 9# رو که B.A.H.M.A.N فرستاده بخون!

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

حتما کمکت میکنه!

 

موفق باشید!

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

در حال بارگذاری


  • کاربران آنلاین در این صفحه

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

×
×
  • اضافه کردن...