تغییر فونت قالب فعلی وبلاگ بیان

پس از انتخاب فونت مورد نظر خود، آپلود آن و یا دریافت نشانی فونت آپلود شده، به مرحله‌ی تغییر فونت قالب وبلاگ خود می‌رسیم. در این آموزش از قالب ۵۳ عرفان استفاده می‌کنم که در سال ۱۳۹۵ منتشر شد و یکی از دلایل تغییر فونت قالب‌ها هم معمولا قدیمی بودن قالب‌ها و به دنبال آن قدیمی بودن فونت‌های به کار برده شده در آن‌ها می‌باشد. قالب مثال ما در نگاه اول به این شکل می‌باشد:

۱. شناسایی نام فونت

اولین مرحله برای تغییر کامل فونت قالب، شناسایی نام فونت در فایل css قالب فعلی ماست. به این صورت که ابتدا با شناسایی نام فونت‌های مورد استفاده در قالب، می‌توانیم تنها با تغییر فایل‌های فونت‌‌های قالب، فونت قالب فعلی خود را به صورت کاملا صحیح و بدون نقص تغییر دهیم.

برای این کار ابتدا وارد پنل مدیریت وبلاگ خود شوید و از قسمت منوی سمت راست گزینه‌های قالب » ویرایش CSS قالب فعلی را انتخاب کنید.

در اینجا می‌بایست دو کلمه را در فایل css قالب خود پیدا کنید. در قسمت جستجوی ویرایشگر قالب خود، کلمه‌ی font-face را تایپ کرده و دکمه‌ی find را بزنید. کلمه‌ای که بعد از خط font-family همانند تصویر متحرک زیر می‌بینید، همان نام فونت قالب شماست که در اینجا از نام yekan استفاده شده است. این نام را جایی به یادداشت نگه دارید و قسمت کد font-face را از آکولاد باز تا جایی که بسته می‌شود،‌ حذف کنید.

اما قالب‌ها معمولا از یک فونت استفاده نمی‌کنند پس در این مرحله به دنبال کلمه‌ی font-family در فایل css قالب خود می‌گردیم تا نام فونت‌های استفاده‌ شده‌ی دیگر قالب خود را در صورت وجود پیدا کنیم. دقت کنید که اولین نام فونتی که در ابتدای خط font-family نوشته شده است، نام فونت مورد نظر ماست. همانطور که می‌بینید در مورد‌های مختلفی که در قالب وجود دارد یا از نام فونت tahoma استفاده شده و یا از yekan. پست این دو، نام‌های فونت مورد نظر ما هستند.

۲. ساخت کد فونت مورد نظر

حال با دانستن نام فونت‌های قالب خود می‌توانید با استفاده از ابزار زیر، کد فونت دلخواه خود را برای قراردادن در قالب خود تولید کنید:

همانطور که در تصویر متحرک بالا مشخص است، ابتدا نام یکی از فونت‌هایی که در مرحله‌ی قبل پیدا کردیم را در فیلد نام فونت تایپ کرده و سپس فونت دلخواه خود را از میان گزینه‌ها انتخاب کنید. حال می‌توانید با زدن دکمه‌ی «تولید کد»، کد css مورد نظر خود را تولید کنید و در پایان با زدن دکمه‌ی «کپی کد»، تمامی کد تولید شده را کپی کنید.

ابزار تولید کد فونت

۳. قراردادن کد‌های تولید شده

پس از تولید و کپی کردن کدهای فونت مورد نظر خود، حالا نوبت به آن می‌رسد که به فایل css قالب فعلی خود بازگردید و در ابتدای آن فایل، کدهای کپی کرده‌ی خود را paste کرده یا قرار دهید و دکمه‌ی «ذخیره» را بزنید.

حالا قالب شما آماده است و فونت‌های آن به صورت کامل به فونت ساحل تغییر داده شده است و خروجی قالب مثال ما به این شکل است:

بیشتر بخوانید:

برچسب‌ها
پیشنهادهای آسمانم

تا حالا۳۴ تا نظر داشتیم!

محمدرضا ...

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

روزتون هم مبارک و شادباش

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
+ روز شما هم مبارک و شادباش ...
۲۳ شهریور ۱۳۹۹

واقعا عالی بود D:

بنظرم این ابزار خیلی مفیده :) 

ممنون :))

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
+ یکی از مشکلات همیشگی تغییر فونت همین بخش بود که به نظرم یک قدم به بهتر شدن فونت قالب‌ها کمک می‌کنه ...
۲۳ شهریور ۱۳۹۹

مرسی از مطلب اموزندتون♡

به وبلاگ منم سر بزنید

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊
+ حتما ... 🌹
۲۳ شهریور ۱۳۹۹

سلام

چطوری خوبی؟؟

ببخشید کم میام کار زیاد دارم هم تو گوگل هم تو خونه درسامم که شرو شده شرمنده کم میام اینجا:((

یه چیزی هدر سراغ نداری ترسناک باشه یا انیمه ای خفن و ترسناک

یه چیزی تو مایه های هدر الانم دقیقا الان درستش کردم چطور شده؟

۲۳ شهریور ۱۳۹۹
سلام ... قربونت خوبم ... امیدوارم تو هم خوب باشی ...
+ ن ... منم کم میام ... این چه حرفیه ... 😁😂
+ هدرت خوبه ... نیازی نیست که ... ولی آره ... گوگل راهکار نهائیه ... 😁😂
۲۳ شهریور ۱۳۹۹

چه ابزار خفتی :)

۲۳ شهریور ۱۳۹۹
مرسی ... 😊🌹
۲۳ شهریور ۱۳۹۹

عالی بود ممنون

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
۲۳ شهریور ۱۳۹۹

ممنونم، خیلی مفید بود.

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
۲۳ شهریور ۱۳۹۹

من یادم نیس ...

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

ندارمش کد و /:

اگه منظورمو فهمیدین بذارینش :)

یادمهimportant ! داشت : دی

۲۳ شهریور ۱۳۹۹
درسته ... اون روش دیگری هست که آخر پست ... قسمت «بیشتر بخوانید» لینک دادم ... و از طریق لینک می‌تونین کدش رو پیدا کنین ...
+ با روش قبلی مشکلاتی توی قالب‌ها وجود داشت و فونت‌ها به صورت کامل به یک فونت تغییر پیدا نمی‌کردن ... اما توی این روش ... همه‌ی فونت‌ها تغییر می‌کنن ...
+ 😊🌹
۲۳ شهریور ۱۳۹۹

ممنون چقد خوبو کاربردی.....🌷

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
۲۳ شهریور ۱۳۹۹

عالی بود :))

۲۳ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
۲۳ شهریور ۱۳۹۹
سلام میشه چندتا فونت باهم نصب کنم بعدش مثلا یه جا yekan استفاده کنم یه جای دیگه وبم فونت گندم؟
کاش یه نمونه از فونت میذاشتی که مثلا وقتی هرفونتی رو تیک میزنیم مثه بعضی سایتا یه بیت شعر باهمون فونت نشون بده ببینیم کدومشون مناسب وبمونه
۲۳ شهریور ۱۳۹۹
سلام ... وقتت بخیر ... 😊🌹
میشه ... ولی به جای هر اسم یکی ... مثلا یه اسم فونت توی قالبت پیدا کردی که هست yekan و یکی دیگه هست sahel ... می‌تونی یه بار کد رو برای yekan با فونت استعداد بسازی و توی فایل سی‌اس‌اس بذاری و یک بار هم برای sahel با فونت وزیر ... فقط مطلب رو از اول تا آخر بخون تا یه جا اشتباه نکنی و کار درست و حسابی از آب در بیاد ...

+ اتفاقا پست‌های قبلی فونتم ... فونت‌های مختلف رو معرفی کردم ... می‌تونی از تگ فونت برای پیدا کردن پست‌ها و مخصوصا پست «بهترین فونت‌های فارسی مناسب وبلاگ» ... فونت‌ها مختلف و نظرات بقیه وبلاگ‌نویس‌ها رو ببینی ... و با هم مقایسه کنی ...
۲۳ شهریور ۱۳۹۹

راستی شنبه روز جهانی برنامه نویسی بود، بهت تبریک میگم🌷🎉 البته بعدا بعد 😐😅

۲۴ شهریور ۱۳۹۹
مرسی Arian ... خوشحالم کردی ... 😊😁🌹
۲۴ شهریور ۱۳۹۹

ممنون بابت وقتی که میزارید و این ابزار های مفید رو قرار میدید :))

۲۴ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... ⁦☺️⁩🌹
۲۴ شهریور ۱۳۹۹

عالی بود😊💗

۲۴ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... ⁦☺️⁩🌹⁦❤️⁩
۲۴ شهریور ۱۳۹۹

ببخشید با گوشی نمی شه فونت عوض کرد ؟؟؟

۲۷ شهریور ۱۳۹۹
میشه ... چرا که نه ...
+ توی مرحله اول اگه بتونین اسم فونت‌های استفاده شده توی قالبتون رو پیدا کنین و برای هر کدوم کد درست کنین و تک به تک در ابتدای فایل css تون جاگذاری کنین ... شدنی هست ...
+ فقط ممکنه تجربه کاربریتون با گوشی سخت باشه ...
۲۷ شهریور ۱۳۹۹

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

۳۰ شهریور ۱۳۹۹
خواهش می‌کنم ... مرسی ... 😊🌹
+ راستش برای خودم هم سخت بود که هر بار برای تغییر فونت یک قالب کدی رو جایی ذخیره کنم و تک تک اسم‌ها رو دستی تغییر بدم ... و موافقم ... برای من هم این ابزار کاربردی بود ... 😊😁👍
۳۰ شهریور ۱۳۹۹

واو.. فوووووق العاااااااااده س...

۱۳ مهر ۱۳۹۹
خواهش می‌کنم ... ⁦☺️⁩🌹
۱۴ مهر ۱۳۹۹

سلام  من یه مشکلی دارم

لینک رو کپی کردم و همه ی فونتا تغییر کرد اما آیکون نظر و لایک دوتاشون شکلش مربع شدن

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

۳ آذر ۱۳۹۹
سلام ... وقتتون بخیر ...
شما یک اشتباه کوچیک احتمالا کردین و اسم فونت آیکون‌هاتون رو هم وارد کردین ... این کار یک مقدار دقت می‌خواد که سعی کنین برای فونت‌هایی به اسم fontawesome یا مشتقات این اسم کد فونت تولید نکنین و نشانی فونت‌هاش رو حذف نکنین
۳ آذر ۱۳۹۹

عه درسته !

الان اوکی شد 

ممنونم

۳ آذر ۱۳۹۹
خواهش می‌کنم ... 😊🌷🌹
۳ آذر ۱۳۹۹

سلام شبتون بخیر

ببخشید من هر چی سعی میکنم تغییر نمیکنه 

دقیقا همینکارا رو انجام دادم ولی نشد میشه راهنمایی کنید

۵ آذر ۱۳۹۹
سلام ... شب شما هم بخیر ...
خب یه جای کارتون حتما اشکال داره یا یه حالت خاصه ... نشانی قالبتون رو برام بفرستین چک کنم ...
۵ آذر ۱۳۹۹

این وبمه تازه زدمش

۵ آذر ۱۳۹۹
خب مبارک باشه ... من روی وبلاگ شما تست کردم ... مشکلی نداشت ... فقط شما احتمالا توی قسمت شناسایی اسم فونت به کار رفته انگار به مشکل بر خوردین ...
اسم فونتی که قالب شما داره استفاده می‌کنه ... Tahoma هست ... و این اسم رو وارد ابزار کنین ... و فونتتون رو انتخاب کنین و کد رو تولید و کپی کنین و در خط اول فایل سی اس اس قالب وبلاگتون paste کنین تا کار کنه ...
۵ آذر ۱۳۹۹

سلام =)

من همه ی اینکارا رو انجام دادم ولی احساس می کنم فقط بعضی از قسمت هاش فونت ساحله •~•


+ بعدا نوشت ! هیچی درستش کردم D:

۱۲ دی ۱۳۹۹
سلام ... وقت بخیر ...
خب فعلا که فونت قالب شما Segoe UI هست ... و مشکل رو نمی بینم ... ولی ممکنه حالت خاصی داشته باشه ... یا جایی از قالب اسم فونت رو درست وارد نکردین ... و مشکل تایپی ایجاد شده باشه ... این روش رو من با چندین قالب از منابع مختلف تست کردم و مشکلی نداره ... یه جای کار احتمالا مشکل به وجود اومد.


+ خب مشکل از کجا بود ؟
۱۲ دی ۱۳۹۹

داشتم رو یه وب دیگه امتحان می کردم ، اولش برا کد yekan رو زدم و بعضی از قسمت های وبلاگ فونتش عوض نشد ، ولی بعدش tahoma رو زدم درست شد !

ممنون از اینکه انقدر قشنگ توضیح دادین که من متوجه شدم ! من که از کد ها چیزی سر در نمیارم D:

۱۲ دی ۱۳۹۹
عالیه پس مشکل همین بود ... خوشحالم که به درد خورد ...
خواهش می‌کنم ... مرسی از شما ... 😊🌹
۱۲ دی ۱۳۹۹

سلام داداش خسته نباشی

من باز اومدم زحمت بدم :(

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

۳۱ فروردين ۱۴۰۰
سلام ... وقتت بخیر ... سلامت باشی ...
چه زحمتی ... سوالیه که اگه بلد باشم جواب میدم ... خواهش می‌کنم ...
ن ... این کد برای فقط اون‌ها نیست ... هر قالبی از تقریبا هر وبلاگی یا وبسایتی رو میشه با این روش تغییر داد ... فقط اولین مرحله شناسایی اسم فونت هست ...
نشانی وبلاگی رو که گذاشتی بررسی کردم ... فونتی برای متن نصب نشده روی این قالب تنها font-awesome هست که فونت آیکن هست ... و نباید تغییرش بدی ... و یه کم کارت بیشتره ... با ابزار یه فونت انتخاب کن و اسمش رو یه چیزی بذار مثل vanda و کدش رو تولید کن ...
به اول فایل سی اس اس قالبت برو و کد فونت رو خط اول paste کن ... حالا خط بعدی کد زیر رو کپی کن و اونجا توی خط بعد از کد فونت رو که گذاشتی paste کن:
textarea, input, select, body {
    font-family: vanda, sans-serif;
    font-size: 12px;
}
فقط دقت کن که به جای vanda جلوی خط font-family توی کد ... اسمی رو که برای فونت قالب انتخاب کردی رو بذار و خط دوم هم که font-size هست عددش رو می‌تونی تغییر بدی برای اندازه فونت قالب مثلا می‌تونی بکنی 13px که فونتت بزرگتر بشه ... اگر که کوچیکه ...
۱ ارديبهشت ۱۴۰۰

سلام 

خیلی ممنون از ابزار مفیدتون 

یه سوال داشتم، من توی یه قالب جدید که میخوام بزارم، نه font-family نه font-face هیچکدوم نیستن؛ از همون اول کد با body شروع میشه.

چطوری باید فونتش رو به ساحل تبدیل کنم ؟ 

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

۱۲ خرداد ۱۴۰۰
شما می‌تونین کد فونت ساحل رو با استفاده از ابزار این پست تولید کنین و به ابتدای فایل سی اس اس قالبتون اضافه کنین ... فقط برای اجرا شدن در مثال زیر اسم فونتتون رو sahel بذارین ... تا مشکل پیش نیاد ...
در مرحله بعد ... یه خط پایین تر از اون کد فونتی که paste کردین ... کد زیر رو درج کنین تا فونت قالبتون تغییر کنه :
textarea, input, select, body {
    font-family: sahel, serif;
    font-size: 12px;
}
فقط دقت کنین که در قسمت font-size می‌تونی با تغییر تنها عدد 12 به مثلا 13 به بالا یا پایین ... اندازه فونت قالبتون رو تغییر بدین.
۱ تیر ۱۴۰۰

عالی بود بابت ‌‌‌بلاگ خوبتون هم خیلی مرسی💙💕

۸ آذر ۱۴۰۰
مرسی ... خواهش می‌کنم ... 😊🌹
۸ آذر ۱۴۰۰

سلام و درود

 

سالهای زیادی بود که هر روز خدا درگیر همین موضوع بودم... دم شما گرم و کمال سپاس

۲۰ دی ۱۴۰۰
سلام و درود متقابل ...
خدا را سپاس ... خوشحالم که به دردتون خورد ... مرسی از شما ... 😊🌹
۲۰ دی ۱۴۰۰

سلام خسته نباشید

نمیتونید تصور کنید که این مطلب و مطالب دیگتون چنتا وبلاگ نویس رو نجات داده

واقعا ممنون ازتون

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

میشه لطفا یه راهنمایی بکنید؟

۱۹ اسفند ۱۴۰۰
سلام ... وقتتون بخیر ... سلامت باشین ...
خداروشکر ... مرسی از لطفتون ... خوشحالم که به کارتون اومدن ...
خواهش می‌کنم ...

قالبی که گفتین رو دیدم ... قالب اسم فونتی رو به عناصر صفحه نسبت نمیده ... شما کافیه که یک اسمی مثل shoco رو وارد ابزار فونت ساز کنین ... و کد رو تولید و کپی کنین ... و به انتهای فایل CSS قالبتون اضافه کنین ... و بعد از اون ... به انتهای فایل css قالبتون کد زیر رو اضافه کنین ... فقط توجه کنین که به جای shoco اسمی که وارد ابزار کردین رو توی کد زیر تغییر بدین ... اگر اسم دیگه‌ای رو انتخاب کردین ...

html {
	font-family: shoco, serif;
}
۱۹ اسفند ۱۴۰۰

درسته خودم که نگاه کردم فقط فونت برای آیکون های صفحه نسبت داده شده بود ظاهرا

خیلی ممنون از لطفتون فونتش درست شد

 

۱۹ اسفند ۱۴۰۰
کاملا درسته ...
خواهش می‌کنم ... 😊🌹
۱۹ اسفند ۱۴۰۰

سلام

دوست دارم تشکر کنم ولی واقعا نمی‌دونم چطوری تشکر کنم که احساس شادی خودم رو رسونده باشم.

خیر ببینی داداش که یه غصه بزرگی از دلم برداشتی.

خدا یه غصه بزرگ از دلت برداره و به آرزوهات برسی.

ممنونم

۶ فروردين ۱۴۰۲
سلام، وقت بخیر
نظر لطفته، مرسی از کامنت انرژی بخشت ... خیلی حس خوبی داره که بدونی چیزی که ساختی واقعا به درد کسی خورده.
منم برات آرزوی خیر و موفقیت می‌کنم ... امیدوارم خیرت به خیلی‌ها برسه ...
مرسی از تو 🙏🌹🌷🌸
۶ فروردين ۱۴۰۲

سلام و روز به خیر

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

ممنون از لطف شما

۷ فروردين ۱۴۰۲
سلام، وقت بخیر ...
خب فونت ساحل با نسخه تنها اعداد فارسی منتشر نشده، حداقل من ندیدم
برای این که اعداد رو فارسی نشون بده باید با کاراکتر فارسی اعداد رو بنویسین، یعنی زبان کیبوردتون رو فارسی کنین و با اعداد زیر اف‌ها بنویسین نه با نامپد.
خواهش می‌کنم ... 🙏🌹🌷
۷ فروردين ۱۴۰۲

سلام آقا محمد رضای گل

فونت «طبقه بندی موضوعی» رو از کجا می‌تونم بیشتر کنم؟

پیشاپیش از راهنمایی شما متشکرم

۷ فروردين ۱۴۰۲
سلام دوست من ...
فونت طبقه بندی موضوعی رو من نمیشناسم ... متوجه منظورت نشدم
🙏🌹🌷
۷ فروردين ۱۴۰۲

با سلام مجدد

در قسمت «طبقه بندی موضوعی» که موضوعات وبلاگ رو نشون میده، می‌خوام سایز فونتش رو بیشتر کنم ولی نمیدونم از کجای سی اس اس باید فونتش رو زیاد کنم. لطفا راهنماییم کنین

۷ فروردين ۱۴۰۲
سلام، وقت بخیر
امیدوارم درست متوجه منظورتون شده باشم، اگر می‌خواین در پنل بیان، فونت متن رو عوض کنین من یک استایل برای پنل بیان برای افزونه stylus نوشتم که لینکش رو در ادامه میذارم، فونتی که استفاده کردم وزیر هست، برای استفاده باید این افزونه روی برای مرورگرتون نصب کنین و روی صفحه‌ی زیر برین و دکمه‌ی install رو بزنین، برای تغییر سایز هم می‌تونین از کد انتهای این استایل استفاده کنین که سایز فونت رو ۱۳ پیکسل گذاشتم:

۷ فروردين ۱۴۰۲

عالی بود

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

۲۲ فروردين ۱۴۰۲
خداروشکر که به دردتون خورد ... مرسی 🙏🌹🌷
۲۲ فروردين ۱۴۰۲
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
چت درباره من تماس جعبه ابزارها آسمانی‌ساز لینک رسان موزیک‌ها 💙 برنامه وبلاگ CKEditor Quill TinyMCE Froala کانال آپارات