صابر

صابر

چای می‌خورین یا قهوه؟

تغییر فونت وبلاگ به زبان ساده

چهارشنبه, ۲۴ شهریور ۱۳۹۵، ۰۱:۲۲ ب.ظ

هر صفحه وبلاگ شما از دو جزء اصلی تشکیل شده:
۱. HTML که در واقع همان ساختار و محتوای صفحه را تشکیل می‌دهد. مثلا همین وبلاگی که می‌بینید در اصل این شکلی هست:

۲. CSS که کار شکل‌دهی و رنگ‌آمیزی را انجام می‌دهد و نتیجه می‌شود این:

جهت بزرگنمایی تصاویر بر روی آنها کلیک نمایید.

برای تغییر فونت در سرویس دهنده‌های وبلاگی مختلف بدین گونه عمل می‌کنیم:

Blog.ir بلاگ بیان

اگر از blog.ir خدمت می‌گیرید:
۱. در منوی سمت راست مشابه عکس، گزینه "ویرایش CSS قالب فعلی" را انتخاب کنید.
۲. سپس در کادر نوار ابزار بالا کنار find واژه font را به لاتین جستجو نمایید. ممکن است تعداد زیادی از آنها را بیابید.
۳. هر جا font: یا font-family: را دیدید ابتدای اسامی فونت‌ها نام فونت دلخواهتان را به همراه یک کامای لاتین یعنی «,» وارد کنید.

یا اینکه به جای مراحل ۲ و ۳ یعنی جستجو و تغییرات متعدد، صرفا متن زیر را یک بار در ابتدای CSS قرار دهید:

*:not(.fa) {
  font-family: Sahel !important;
}

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

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

از آنجایی که اغلب فونت های وبی یا جدید بر روی سیستم‌عامل کاربران نصب نمی‌باشد و همچنین نسخه‌های جدید فایرفاکس از روی سیستم، فونت را نمی‌خواند پس باید این فونت را در جایی روی وب ذخیره و به کمک همان CSS آن را به همراه صفحه بر روی مرورگر مخاطب بارگزاری نماییم. تقریبا همه وب‌سایت‌های دنیا به یکی از این دو صورت عمل می‌کنند:

۱. روش ساده و میانبر:

برخی فونت‌ها قبلا روی وب ذخیره شده‌اند و می‌تونید به راحتی از آن‌ها استفاده کنید. توی این روش پس از مرحله ۳ کافیه که به قسمت "ویرایش ساختار قالب فعلی" مراجعه سپس بعد از <head> این خط را وارد کنید و پس از آن دکمه ذخیره را کلیک کنید.

فونت ساحل:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/font-face.css">


فونت وزیرمتن Vazirmatn:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@33.003/Vazirmatn-font-face.css">

 

قلم صمیم Samim:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/samim-font@v4.0.5/dist/font-face.css">

 

قلم شبنم Shabnam:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v5.0.1/dist/font-face.css">

 

قلم تنها Tanha:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/tanha-font@v0.10/dist/font-face.css">

 

قلم ناهید Nahid:

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/nahid-font@v0.3.0/dist/font-face.css">

و ...
البته به جای مثلا shabnam@v5.0.2 می‌توانید شماره آخرین نسخه فونت را قرار دهید. به هر صورت موارد بالا بدون مشکل کار می‌کنند. برای مشاهده ورژن هر قلم به صفحه خودش مراجعه کنید.

در نظر داشته باشید که به جای اسم مثلا Sahel در قسمت ویرایش css باید نام لاتین فونتی که بارگذاری کرده‌اید را بگذارید. مثلا برای فونت وزیرمتن:

*:not(.fa) {
  font-family: Vazirmatn !important;
}

فهرست قلم‌های آزاد: rastikerdar.github.io
مقایسه قلم‌های فارسی: rastikerdar.github.io/compare-fonts

همین!

۲. روش اصلی و طولانی:

اگر هیچ یک از فونت‌های بالا مورد پسند شما نبود و مایل بودید فونت دلخواه خودتان را اضافه کنید از این روش استفاده کنید. برای این منظور فایل woff فونت را در جایی مثل bayanbox.ir یا همان صندوق بیان در منوی سمت راست آپلود و آدرس آن را کپی کنید.



پس از کپی آدرس، آن را در متن زیر در قسمت url وارد نمایید و سپس کل این متن  را به ابتدای CSS در قسمت "ویرایش CSS قالب فعلی" وبلاگتان اضافه کنید:

@font-face {
  font-family: Sahel;
  src: url('http://bayanbox.ir/download/YYY/Sahel.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: Sahel;
  src: url('http://bayanbox.ir/download/YYY/Sahel-Bold.woff') format('woff');
  font-weight: bold;
}


هر چند نسخه کامل‌تر این متن را می‌توانید در آدرس زیر مشاهده نمایید:
https://github.com/rastikerdar/sahel-font

همین!
برای مشاهده دیگر فونت‌ها به آدرس زیر مراجعه کنید:
http://rastikerdar.blog.ir/tag/%D9%81%D9%88%D9%86%D8%AA
 

Blogfa بلاگفا

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

Mihanblog.com میهن‌بلاگ

برای میهن بلاگ نیز از روش مشابه استفاده نمایید.
در منوی سمت راست قالب را انتخاب نموده و سپس در بالا سمت چپ "ویرایش قالب فعلی" را کلیک کنید. تفاوت میهن بلاگ با سرویس بلاگ در اینست که میهن بلاگ فایل HTML و CSS را در یک جا قرار داده است. و شما به جای "ویرایش CSS قالب فعلی" در سرویس بلاگ بیان کافیه که در در قسمت <style> به دنبال واژه فونت بگردید و تغییر دهید.

 

در صورتی که این مطلب برای شما مفید بوده به دیگران نیز معرفی فرمایید تا احیانا مشکلشان حل شود.

  • صابر راستی کردار

نظرات (۶۱)

  • ۲۸ شهریور ۹۵ ، ۱۳:۰۶
  • مهدی
    • سلام برادر 
    خیلی قشنگ توضیح دادید ولی من باز نفهمیدم اصن من از کد و...
    هیچی نمیدونم 
    خیلی دوست داشتم حضوری بیام خدمتتون برام توضیح میدادید
    پاسخ:
    باور کن آفا مهدی از این ساده تر بعید می دونم کسی بتونه توضیح بده. پیش فرض من موقع نوشتن این بود که مخاطب هیچی از کد نمی دونه و نباید بدونه :)
    من دقیقا مرحله به مرحله شرح دادم که چه باید کرد. نه اینکه چه باید دانست!

    اگر در حین مراحل مشکلی داشتید بفرمایید.
  • ۰۵ مهر ۹۵ ، ۱۱:۲۶
  • .
    • برادر من فایل (woff) که در فایل زیپ فونت وزیر بود رو برداشتم
    در بیان باکس ذخیره کردم
    آدرس لینک رو برادشتم گذاشتم جای url اسم وزیر هم نوشتم
    ولی هنوز فونت تغییر نکرده
    خواهش می کنم کمکم کنید
    پاسخ:
    ۱. آدرس مستقیم خود فایل رو باید بدین نه صفحهٔ فایل.
    ۲. اطمینان یابید که نام وزیر در ابتدای فونت‌ها توی CSS به درستی وارد کرده باشید.
    ۳. یا اینکه از روش ساده و میانبر که توی توضیحات آمده استفاده کنید.
  • ۰۵ آذر ۹۵ ، ۲۱:۰۵
  • ابو اسفنج بلاگفانی
    • سلام علیکم. خیلی خیلی سپاسگزارم. استفاده کردم. ممنون.
    پاسخ:
    سلام
    خواهش می‌کنم
  • ۰۴ تیر ۹۶ ، ۱۵:۳۳
  • محمدحسین چهاردولی
    • عالی بود دوست عزیز. من ادمین لینوکس و اوراکل هستم و از کامپیوتر فقط خط فرمان رو می‌فهمم. UI واقعاً برام سخت ه و خیلی خوب توضیح دادی شما. ان شاالله جبران کنیم.
    پاسخ:
    خوشحالم به دردتون خورده. البته نسخه‌های جدیدی از قلم‌ها منتشر شده که شاید نظرتون رو جلب کنه و شاید هم خیر.
  • ۱۳ تیر ۹۶ ، ۰۹:۲۵
  • محمدحسین چهاردولی
    • یه سوال نسبتاً نا مرتبط. راه‌کاری برای تغییر فونت توی وردپرس هم هست ؟
    چه ادیتوری که بشه فونت فارسی بهش معرفی کرد و چه دست کاری css تم وبلاگ ؟
    پاسخ:
    من بی‌خبرم. احتمالا باید پلاگینی براش نوشته شده باشد. البته با دستکاری قالب وبلاگ میشه مستقیما اضافه کرد.
  • ۲۶ آذر ۹۶ ، ۱۱:۱۵
  • جواد
    • پس چرا آموزش بلاگفا نزاشتین
    پاسخ:
    توی بلاگفا حساب ندارم ولی احتمالا شیوه کار مثل بیان‌بلاگ و میهن‌بلاگ باشه. چند خط بالا رو به فایل قالب و css اضافه کنید.
  • ۲۱ دی ۹۶ ، ۱۷:۵۱
  • مریم عباسی
    • bara belogfa chi
  • ۲۲ دی ۹۶ ، ۱۵:۰۲
  • علیرضا خزائی
    • سلام ببخشید من فونت ایران یکان رو خریدم میخوام روی وبلاگم پیاده کنم وبلاگم بیانه چطور باید اینکارو کنم
    پاسخ:
    سلام کافیست مراحل بالا را دنبال و سپس قسمت «روش اصلی» را پیگیری کنید و به جای فایل ساحل، فونت دلخواهتون رو قرار دهید.
  • ۱۹ اسفند ۹۶ ، ۰۷:۵۳
  • آروین اردکانی
    • سلام ممنون از آموزش خوبتون. من تونستم فونت منو های بلاگم رو عوض کنم.

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

    ممنون میشم اگه کمکم کنید.
    آروین
    پاسخ:
    سلام.
    خیر مگر اینکه به سورس ادیتور دسترسی داشته باشید یا برای مرورگر یک اکستنشن بنویسید. در هر صورت اگر فونت به همراه خود صفحه از طریق وب‌سرور لود نشه عملا اینکار بیهوده به نظر می‌رسه چون فونت برای نمایش یا باید روی دستگاه مخاطب نصب باشه یا از طریق وب‌سرور بارگزاری بشه.
  • ۲۲ اسفند ۹۶ ، ۲۳:۵۸
  • آروین اردکانی
    • ممنون از پاسخگوییتون.

    من خیلی درست متوجه نشدم. این کاری که در این مطلب آموزش دادید مگر باعث نمیشه که فونت از طریق سرور لود بشه؟ اگر بله، راهی هست که همین کار رو برای فونت های متن ها کرد؟
    من خودم توی سورس html، با استفاده از find & replace تمام فونت های سایت رو به یکان تغییر دادم. حتی فونت قسمت نظر ها هم به یکان تغییر پیدا کرد. ولی هنوز متن خود مطالب نوشته شده، از تنظیمات ویرایشگر tinyMCE برای نمایش فونت متن ها پیروی میکنه! آیا شما راهی به ذهنتون میرسه که بشه دستی از طریق کد عوضشون کرد؟
    مثلا همین بلاگ شما فونتش چی هست؟ اگه بلاگ من رو یه سر بزنید میبینید متن ها Arial هستند، ولی کامنت ها و منو ها همه فونت یکان هستند!

    ممنون،
    آروین
    پاسخ:
    اشتباه شما اینه که موقع نوشتن متن توی ویرایشگر پست براش فونت تعریف می‌کنید در نتیجه مرورگر مجبور میشه به جای استفاده از فونت قالب صفحه، از فونتی که توی ادیتور تعیین کردید استفاده کنه. توی ادیتور تمام متن رو انتخاب کنید و دکمه «حذف فرمت» رو بزنید (آیکون پاک‌کن) و برای همیشه اون قسمت انتخاب فونت رو فراموش کنید. اگر می‌خواهید از یکی از فونت‌های شبنم، ساحل، وزیر و ... استفاده کنید مثل روش ساده و میانبری که توی همین پست توضیح دادم عمل کنید. فونت این وبلاگ ساحل هست. در هر صورت با حذف فرمت، تمام متن با فونت یکان به نمایش در میاد.
  • ۲۳ اسفند ۹۶ ، ۲۲:۲۶
  • آروین اردکانی
    • یک دنیا سپاس به خاطر کمکی که کردید!! من اصلا همچین چیزی به ذهنم نمیرسید اگر نمیگفتید. درست گفتید من اگر در ویرایشگر فونتی را انتخاب نکنم، فونت دیفالت از روی کد ها استفاده میشه که یعنی همون چیزی که خودم در قالب نوشتم!
    پاسخ:
    درسته. اشتباه خیلی از وبلاگ‌نویس‌ها هم همینه که «اندازه یا فونت یا رنگ» رو توی ادیتور پست انتخاب می‌کنند که اشتباه است. چون با تغییر قالب یا پلتفرم نمایش (مرورگر، موبایل و ...) اینها با هم تداخل پیدا می‌کنه و مشکل ساز می‌شن. شاید بهتر بود که بیان این چند گزینه‌ رو حذف می‌کرد.
  • ۲۹ فروردين ۹۷ ، ۱۳:۲۴
  • علیرضا آهنی
    • لطفاً امورش فونت تنها را به روش ساده و کوتاه را اضافه کنید
    پاسخ:
    برای فونت تنها کافیست خط زیر رو به جای مثلا ساحل وارد کنید:
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/tanha-font/v0.9/dist/font-face.css">
    و توی کد css هم به جای کلمه Sahel کلمه Tanha رو بگذارید.

  • ۱۲ خرداد ۹۷ ، ۱۴:۳۰
  • هادی
    • سلام دادش
    آقا هر دوتا روش رو امتحان کردم اما نشد
    وبلاگم در بلاگ ۸۸ است. b88.ir
    نه ویرایش css داره و نه مثل میهن با اگه.
    منتظر پاسخ شما هستم.
    پاسخ:
    سلام
    متاسفانه از پنل مدیریت آن سرویس اطلاعی ندارم.
  • ۰۳ تیر ۹۷ ، ۰۸:۱۸
  • مهدی
    • سلام؛

    من تا حدی با کد نویسی آشنا هستم ولی هر کاری کردم تو بلاگفا نتونستم فونت دلخواهم رو تغییر بدم. نمیدونم بلاگفا لینک های خارجی ای که به فونت داده میشه رو فیلتر میکنه و در نهایت قبول نمیکنه یا ی جای کار من مشکل داره. میشه لطفاً توی بلاگفا هم آموزش بدید؟
    پاسخ:
    سلام
    متاسفانه من از ساز و کار بلاگفا اطلاعی ندارم.
  • ۰۳ تیر ۹۷ ، ۱۴:۴۸
  • moein karimi
    • با سلام مطالب مفید بود با انجام مراحل گام به گام باز هم موفق به تغییر عنوان وب به فونت نستعلیق نشدم ممنون میشم راهنمایی کنید
    پاسخ:
    سلام. راستش من نمی‌دونم مشکل چیه که راهنمایی کنم. اما توصیه می‌کنم از یک نفر آشنا به طراحی صفحات وب کمک بخواهید تا برایتان آن را تنظیم کند.
  • ۱۱ تیر ۹۷ ، ۱۱:۴۲
  • هادی
    • سلام
    فونت وبلاگم رو تونستم عوض کنم. ممنون ازتون
    ولی مشکلی اینجا وجود داره .
    وقتی با کروم باز می کنم فونت ها به خوبی نشون داده میشن ولی وقتی با فایر فاکس باز می کنم ،فونت مورد نظر نمایش داده نمیشه.

    من از روش میانبر استفاده کردم و این کد رو خط بعد head قرار دادم.
    و تو قسمت مطالب از قسمت css اسم فونت تمامی نوشته ها رو به vazir تغییر دادم .
    منتظر راهنمایی تون هستم
    اگه می خواهید نگاهی بندازید آدرس وبلاگم
    c14.b88.ir
    هست.
    پاسخ:
    سلام
    چیزی که من الان می‌بینم ساختار کد html شما اشتباه است. تمام تگ‌های ‌<link>...</link> , <meta>...</meta> باید در میان تگ <head>...</head> قرار بگیرند؛ نه در میان <body>...</body>. برای همین است که کل صفحه شما رو در مرورگر فایرفاکس من خراب و به هم ریخته نشان می‌دهد. دقت داشته باشید کدی که سالم باشد در هر دو مرورگر فایرفاکس و کروم نمایش یکسانی خواهد داشت. ضمنا ctrl+shift+r باعث میشه درخواست شما به سرور، درخواستی نو و بدون مراجعه به فایل‌های تاریخ گذشته باشد.
  • ۱۱ تیر ۹۷ ، ۱۵:۲۶
  • گرافیک مستر
    • سپاس گزارم ، واقعا کاربردی بود 🌹🌹
    در بعضی فونت ها ممکنه اشکالی به وجود بیاد و در برخی مرورگر ها درست نمایش داده نشه ؟
    پاسخ:
    اگر کدها و فرمت فایل‌ها صحیح باشند قاعدتا اشکالی رخ نمی‌دهد. بعید است که ایراد از خود فونت باشد.
  • ۱۹ تیر ۹۷ ، ۲۳:۰۰
  • هادی
    • سلام
    درست گفتید. قالب بلاگم به هم ریخته است،اما دلیل آن کد سئو است،که در راهنمای آن به صورت
    <html>
    <head>

    کد ایجاد شده توسط ژنراتور تگ متا یا سئو اینجا قرار دهید
    قبل از قرار دادن کد ایجاد شده ، باید درصورتی که کدهای تگ متا موجود باشد، پاک شود
    در غیر اینصورت سایت شما، سئو یا بهینه سازی برای موتورهای جستجو نخواهد شد

    </head>

    <body>
    .پیام و اطلاعات شما اینجاست و در صفحه وب قابل دیدن است فقط
    </body>

    </html>

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

    ممنون میشم اگه یه راهنمایی کنید.
    پاسخ:
    کد html قاعده‌ای داره که رعایتش الزامی هست. من الان هم کد وبسایت شما رو دیدم کاملا به هم ریخته است. قبل html نباید کدی قرار بگیره. تنها یک تگ html و head و body در صفحه باید موجود باشه و ...
    بیخیال این کدهای سئو پئو بشید. سایتتون اگر محتوای باکیفیت داشته باشه خودکار توی موتور‌های جستجو با رتبهٔ مناسب ایندکس میشه.
  • ۱۵ مرداد ۹۷ ، ۱۰:۵۱
  • مهدی
    • آقای راستی کردار عزیز
    با آنچه از مطالب شما آموختم، وبلاگم را آنگونه که می‌خواستم ویرایش و آرایش کردم. واقعاً از شما ممنونم.
    یک سؤال هم دارم که سؤال خیلی از کاربران نیز هست:
    چرا اعداد در وبلاگ بصورت انگلیسی درج و نمایش داده میشن. راه حل این مشکل چیست؟ لطفاً راهنمایی فرمایید.
    پاسگزارم ..
    پایدار باشید ..
    پاسخ:
    خواهش می‌کنم.
    خب واقعیت اینست که خود فونت استاندارد است و آنچه را نمایش می‌دهد که وجود دارد. اگر عددی به انگلیسی باشد به انگلیسی نمایش می‌یابد و اگر فارسی باشد به فارسی. اما ترفندی که وجود دارد این است که ارقام انگلیسی رو نیز به فارسی نمایش دهیم که برای این منظور نسخه «تمام ارقام فارسی» در بسته فونت وجود دارد که برای فعال سازی آن باید قسمت «روش طولانی» آمده در همین پست رو دنبال بفرمایید.
  • ۱۳ شهریور ۹۷ ، ۲۲:۵۰
  • هادی
    • نام سایت که باید بریم اشتباه نیست؟
    پاسخ:
    متوجه نشدم! نام کدام سایت؟
  • ۱۶ شهریور ۹۷ ، ۱۶:۳۸
  • هادی
    • سلام ،واقعا ممنون از راهنمایی های شما
    فقط یک سوال کوچولو دارم
    می خوام یک فایل html به صورت آفلاین داشته باشم که مثلا یکی از فونت های شما در آن نمایش داده بشه

    آیا واقعا میشه به صورت آفلاین فونت دلخواه رو در فایل htmlنمایش داد؟
    مثلا فونت تو پوشه ی مربوط به فایل html ذخیره باشه و از اون تو بازخوانی کنیم
    اگه میشه لطفا نرم افزار مورد نیاز و کد هاش رو بفرمایید.

    یاعلی
    پاسخ:
    سلام
    بلی می‌شود. همان کد مرسوم ساده HTML است. کار خاصی نمی‌خواهد.
  • ۱۸ شهریور ۹۷ ، ۱۵:۲۸
  • هادی صحت
    • وقتی سایت بلاگ.آی آر را سرچ می کنم سایت بیان را میآور ولی گزینه های گفته شده نیست!
    پاسخ:
    https://blog.ir/create-blog
  • ۱۹ شهریور ۹۷ ، ۰۷:۰۲
  • هادی
    • سلام
    ببخشید ،منظور شما از کد مرسوم ساده HTML چیست؟
    میشه بیشتر توضیح بدید؟
  • ۲۰ شهریور ۹۷ ، ۱۴:۳۷
  • خانوم میم
    • سلام من فونت تنها رو وقتی میزارم آیکون نظرات و لایک خراب میشه چه جوری درستش کنم ؟
    پاسخ:
    سلام. احتمالا شما از کد کوتاه زیر استفاده کردین:
    * {
      font-family: Tanha !important;
    }
    من قصدم از اشاره به این کد در مطلب بالا برای این بود که سریع‌تر بتونین خروجی رو ببینید. این کد هر چیزی رو تغییر می‌دهد. اما راه صحیح‌اش اینه که این کد رو حذف کنید و سپس در کل CSS بگردین و اسامی فونت‌ها رو جداگانه به «تنها» یا هر فونت دیگری اختصاص بدین.
  • ۲۳ آبان ۹۷ ، ۱۳:۱۰
  • مجله اینترنتی هلو

    • سلام

    وبلاگ خوبی دارید امیدورام موفق باشید

    مدیر مجله اینترنتی هلو

    www.holoo1.ir
  • ۱۱ دی ۹۷ ، ۰۸:۳۳
  • نصر سایت
    • با سلام
    در پروژه سیستم مدیریت محتوا و سایت ساز آی موبا از دو فونت شما وزیر و شبنم بسیار بهره بردم
    با تشکر از شما بابت این طراحی خوب و حرفه ای
    متشکر میشوم برای حمایت از ما , آی موبا رو به کاربرانتون معرفی کنید
    imoba.nasrsite.ir
  • ۲۲ دی ۹۷ ، ۰۰:۳۷
  • ناصر دوستعلی
    • سلام
    وقت بخیر

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

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

    موفق باشید
    یاعلی
    پاسخ:
    سلام
    ممنون
    درسته. قبول دارم واقعا مشکله. حالا اگر تونستم روش ساده‌تری ایجاد می‌کنم.
  • ۳۰ فروردين ۹۸ ، ۰۱:۲۲
  • سجاد پورجعفری
    • سلام برای وبم تغییر فونت رو اعمال کردم ولی مطالب وب فونتش تغییر نکرده باید چیکار کنم؟
    پاسخ:
    توی منوی قالب سمت راست، ویرایش css رو انتخاب کنید. سپس انتهاش این چند خط رو هم اضافه کنید.

    textarea, input, select, body {
        font-family: yekan, Tahoma, Verdana, "Times New Roman", serif;
    }
  • ۱۲ ارديبهشت ۹۸ ، ۱۸:۳۱
  • حسن رفعت جو
    • سلام
    خیلی عالی بود
    با همون روش اول درست شد
  • ۳۱ خرداد ۹۸ ، ۱۲:۱۲
  • سید
    • سلام . وبلاگی دارم جهت کارهای محیط زیستی . در بلاگفا .
    قصد دارم فونت عنوان وبلاگ رو عوض کنم ، طوری که همه کاربران هم همین فونت رو ببینند . باید چه کار کنم . ممنون از راهنمایی خوبتون
    پاسخ:
    من در بلاگفا عضو نیستم و به پنلش دسترسی ندارم. اما اصول کار در همه جا به همین صورتیست که در متن آمده.
  • ۰۸ آذر ۹۸ ، ۲۳:۲۴
  • مهدی طاهری کرچگانی
    • خیلی ممنونم کمک بزرگی کردی
  • ۱۳ دی ۹۸ ، ۰۹:۲۹
  • احمدرضا ..
    • سلام ممنون واقعا عالی بود
    پاسخ:
    سلام
  • ۰۳ ارديبهشت ۹۹ ، ۲۰:۳۳
  • دامنِ گلدار
    • سلام، ممنون از توضیحات مفید و خوبی که دادین و همینطور قلم‌های زیبا.
    من اول فونت ناهید رو به روش اصلی استفاده کردم که روی نسخه موبایل اعمال شد اما روی دسکتاپ با مرورگر کروم فونت تاهوما نشون داده میشه اگر اشتباه نکنم.
    قالبم باشگاه هست روی بلاگ بیان. اگر نکته‌ای هست که باید رعایت کنم ممنون میشم راهنمایی کنین.
    پاسخ:
    سلام
    کد قسمت css رو به صورت زیر اصلاح کنید (https به جای http و افزودن سلکتور *). همچنین دیگه نیازی به اون متاتگ وزیر در قسمت html ندارید.

    * {
  font-family: Nahid !important;
}
@font-face {
  font-family: Nahid;
  src: url('https://bayanbox.ir/download/5291685636089780541/Nahid.woff') format('woff');
  font-weight: normal;
}
  • ۰۴ ارديبهشت ۹۹ ، ۲۰:۱۴
  • دامنِ گلدار
    • خیلی لطف کردین درست شد. فقط به‌نظرم با چیزی که قبلا روی موبایل نشون میداد یکی نیست. حالا دوباره فونتها رو نگاه میکنم :)
    موفق باشید!
    پاسخ:
    من جای شما باشم از روش سریع و میانبر انجام میدم مثل همین وبلاگ. اینطوری دیگه نیازی نیست برای هر وزن فونتش رو آپلود کنید و با همون یک خط به طور خودکار کل وزن‌ها و خطوط css به وبلاگ شما اضافه میشه. فقط کافیه بعد از اضافه کردن همون یک خط به تگ <head>، این یک خط رو به css اضافه کنید. در نظر داشته باشید که همزمان از دو روش استفاده نکنید. یا راه طولانی یا میانبر!

    * {
  font-family: Vazir !important;
}
    جای Vazir اسم همون فونتی رو که به صفحه اضافه کردین بگذارید.
  • ۱۶ تیر ۹۹ ، ۱۴:۴۰
  • زری ...
    • سلام...

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



    یه نگاهی بندازین بی زحمت
    ممنون:)
    پاسخ:
    سلام
    خب شما دو تا کار انجام بدین:
    ۱. توی قسمت ویرایش css ابتدا یا انتهایش این خطوط رو وارد کنید و سپس دکمه ذخیره رو کلیک کنید.
    * {
  font-family: Sahel !important;
}
    ۲. در قسمت ویرایش قالب، این خط در جای نادرست قرار گرفته یعنی زیر تگ <body>
    در صورتی که بایستی زیر تگ (یا درواقع درون بلوک) <head> قرار بگیره. پس اون رو منتقل کنید بالاتر. مثلا بعد از <head> یا قبل از </head> قرار دهید.
    <head>
    اینجا
    .
    .
    .
    یا اینجا
    </head>
    فرقی نمی‌کند فقط بین این دو head باشه. سپس دکمه ذخیره رو کلیک کنید.
    ضمنا چون نوشته‌های وبلاگتون ریزه بد نیست این خطوط رو هم به انتها یا ابتدای css اضافه کنید. (قسمت ویرایش css)
    .post-matn {
        font-size: 15px;
        line-height: 1.9;
    }
    اولی اندازه نوشته‌هاست. دومی فاصله بین خطوط. بسته به سلیقه خودتون تغییر بدین.
    من مراحل بالا روی وبلاگ شما تست کردم و خیلی بهتر شد.
  • ۱۶ تیر ۹۹ ، ۲۰:۵۷
  • زری ...
    • خیلی ممنون درست شد:)

    شما قالب طراحی نمی کنید ؟
    پاسخ:
    توصیه می‌کنم اون خط رو در ویرایش قالب به این حالت تغییر بدین:
    تفاوتش تنها در پروتکل آدرس یعنی از http به https هست. اگر کسی وبلاگ شما را با https ببیند (مثلا https://bayan.blog.ir) نمی‌تواند فونت شما رو هم ببیند چون مرورگر، هر درخواستی رو به جایی غیر از https بلاک می‌کند. https نسخه ایمن از http هست و همه جا و هر زمان توصیه می‌شود که فقط و فقط از https استفاده کنید. خوشبختانه با این تغییر آنهایی که با نسخه http وبلاگتون رو می‌بییند هم مشکلی نخواهند داشت. حتی توصیه می‌کنم همیشه نسخه ایمن آدرس وبلاگتون رو به دیگران معرفی کنید یعنی همانی که ابتدایش با https شروع می‌شود. موتورهای جستجو هم به https امتیاز بالاتری می‌دهند.
  • ۳۰ تیر ۹۹ ، ۱۸:۲۱
  • نیک ..
    • سلام.
    خیلی ممنونم.
    فقط ممکنه بگید برای تغییر فونت مطالب چیکار بکنیم؟ منظورم تغییر به فونتی غیر از فونت‌های پیشنهادی خود بیانه.
    پاسخ:
    سلام
    راستش من متوجه نشدم دقیقا منظورتون چیه. یعنی فونت وبلاگتون تغییر کرده اما فونت مطالب دست نخورده؟ اگر چنین هست شاید اگر اسم وبلاگتون رو بنویسید بتونم مشکلش رو پیدا کنم.
  • ۳۱ تیر ۹۹ ، ۱۸:۵۳
  • نیک ..
    • دوباره سلام، راستش خودم انقدر باهاش ور رفتم که درست شد.
    مشکل اینجا بود که من می‌خواستم فونت متن پست‌هام وزیر باشه. ولی تغییر نمی‌کرد. که این فونت رو براش تعریف کردم و کد قسمت post-matn رو ویرایش کردم و درست شد، ممنونم. ^_^
    پاسخ:
    سلام
    آفرین بر اراده و پشتکارتون.
  • ۲۶ شهریور ۹۹ ، ۲۱:۰۳
  • woody bjyxz
    • من دقیقا همونی که آخر گفتینو (روش طولانی) رو تو ویرایش css وبلاگ کپی میکنم مثه عکس ولی وختی ذخیره میزنم میگه اطلاعات وارد شده صحیح نیست!
    چرا نمشه:(
    پاسخ:
    دقیقا متنی رو که اونجا وارد می‌کنید رو اینجا بنویسید تا بتونم ایرادش رو پیدا کنم.
  • ۱۲ آبان ۹۹ ، ۱۶:۲۹
  • تبارک منصوری
    • سلام وقتتون بخیر،من قبلا فونت عنوان وبلاگم نستعلیق بود ولی چون قالبمو عوض کردم به حالت اولش برگشته و راستش یادم رفته که چیکار باید بکنم ممنون میشم راهنمایی بفرمایید.
    پاسخ:
    سلام. برای نستعلیق باید آن فونت را در جایی در وب ذخیره کنید و از روش دوم که توضیح دادم به صفحه اضافه نمایید. اگر نه که باید مخاطب شما آن رو روی سیستم خودش نصب کرده باشد و از مرورگر کروم نیز استفاده کند. حجم فونت نستعلیق هم مقداری زیاد است و صفحه را سنگین می‌کند. پیشنهاد می‌کنم به جای کل فونت یک تصویر با فونت نستعلیق بسازید و آن را به جای هدر یا عنوان صفحه استفاده کنید.
  • ۲۵ آبان ۹۹ ، ۱۲:۵۸
  • |•° ن.م °•|
    • سلام خیلی ممنون بابت توضیحاتتون ولی من همه روش هارو انجام دادم خواستم فونت ساحل بزارم ولی نشد.
    پاسخ:
    سلام. من الان صفحه شما رو دیدم و خوشبختانه مرحله اول رو به درستی انجام دادین. فقط یک کار مونده انجام بدین: از منوی قالب سمت راست ویرایش css رو انتخاب کنید و در انتهایش این سه خط جدید رو وارد کنید و دکمه ذخیره رو فشار دهید و تمام!
    * {
  font-family: Sahel !important;
}
  • ۲۶ آبان ۹۹ ، ۰۹:۳۸
  • |•° ن.م °•|
    • خیلی خیلی خیلی متشکرم درست شد😊🌷🌷🌷🙏💐
    پاسخ:
    خواهش می‌کنم
  • ۱۰ دی ۹۹ ، ۰۸:۰۵
  • عرفان‌‌ ‌‌‌‌
    • سلام.
    نظرم ارتباط چندانی با این مطلب نداره ولی ممنونم که فونت ساحل رو طراحی کردین🌹🙏، یکی از فونت‌های خوب و مورد علاقه من هست :)
    پاسخ:
    سلام
    خواهش می‌کنم
  • ۱۱ بهمن ۹۹ ، ۲۲:۱۸
  • mochi ^-^
    • سلام:)
    من کاری که شما گفتید رو انجام دادم ولی فقط قسمت تایتل پست ها تغییر فونت داده!میشه کمکم کنید؟
    پاسخ:
    فقط این چند خط رو به قسمت ویرایش css اضافه کنید. من در مرورگر خودم به وبلاگتون اضافه کردم درست شد. جای فونت ساحل هم می‌تونید فونت دلخواهتون قرار بدین. 
    @import url("https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/font-face.css");

*:not(.fa) {
	font-family: sahel !important;
}
  • ۱۳ بهمن ۹۹ ، ۱۲:۱۲
  • mochi ^-^
    • ببخشید توی کدوم قسمت css ام این کد رو وارد کنم؟چند جا رو امتحان کردم نشد
    پاسخ:
    در منوی سمت راست پنل مدیریت از قالب گزینه «ویرایش css قالب فعلی» رو انتخاب کنید سپس همان ابتدا بالای همه خطوط چند خطی که گفتم رو اضافه کنید و سپس دکمه «ذخیره» رو کلیک کنید.
  • ۰۱ اسفند ۹۹ ، ۱۶:۳۲
  • Hikara Co
    • سلام ممنون بابت توضیحات
    راستش قالبی که من ازش استفاده میکنم ٬ CSS نداره واسه همین الان که فونت رو از طریق CSS تغییر دادم ٬ آیکون لایک و نظرات خراب شده.
    راهی هست که بشه این مشکل‌ رو حل کرد؟
    پاسخ:
    سلام
    به جای *ی تنها از این روش استفاده کنید:
    *:not(.fa) {
	font-family: sahel !important;
}
    این روش به آیکون‌ها دست نمی‌زند. به جای ‌sahel هم فونت دلخواهتون رو بگذارید.
  • ۱۵ ارديبهشت ۰۰ ، ۱۴:۱۷
  • ناشناس
    • https://rastikerdar.blog.ir/1395/06/24/%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D9%81%D9%88%D9%86%D8%AA-%D9%88%D8%A8%D9%84%D8%A7%DA%AF-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87#comment-HA7AlpTpWow


    توی بلاگفا باید کد زیر را در قسمت head بذارید:

    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@28.0.0/dist/font-face.css">

    <style>

    * {
    font-family: Vazir !important;
    }

    </style>

    البته این برای فونت وزیر هست و برای این که فونت را به ساحل و ... تغییر بدید با توجه به تویحات آقای راستیکردار کد بالا و درون style را تغییر بدید
    پاسخ:
    متشکرم برای توضیحات
  • ۲۰ ارديبهشت ۰۰ ، ۱۰:۳۴
  • Violet J Aron ❀
    • ببخشید من کد فونت ساحال رو تیو وبم گذاشتم اما اون قلبی که مروبط به قسمت لایکه خراب شده. چجوری میشه درستش کرد؟
    پاسخ:
    به جای کد قبلی این رو بگذارید:
    *:not(.fa) {
	font-family: Sahel !important;
}
    خود مطلب رو هم اصلاح کردم.
  • ۲۱ ارديبهشت ۰۰ ، ۰۹:۲۵
  • Violet J Aron ❀
    • من این کارو کردم ولی بازم درست نمیشه :(((
    پاسخ:
    کد قبلی رو پاک کنید. این جدیده رو که اضافه کردین درسته اما چون قبلیه همچنان سر جاشه اجازه نمیده این جدیده درست عمل کنه.
  • ۲۲ ارديبهشت ۰۰ ، ۰۹:۳۹
  • Violet J Aron ❀
    • خب الان ابتدای کد css قالبم این جوریه:
    *:not(.fa) {
    font-family: Sahel !important;
    }
    @font-face {
    font-family: 'Sahel';
    src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BSahel.woff?download') format('woff');
    font-weight: normal;
    font-style: normal;
    }

    بعدشم /*---body---*/ شروع میشه.
    پاسخ:
    ابتدا درسته اما انتهای قالب اون سه خط قدیمی رو پاک کنید مشکل رفع میشه.
  • ۲۳ ارديبهشت ۰۰ ، ۱۳:۵۷
  • Violet J Aron ❀
    • ببخشید میشه مشخص کنید کدوم سه خط قدیمی؟

    چون هرکاری میکنم یا اتفاقی نمیفته یا کل قالب به هم میریزه
    پاسخ:
    من فایل رو برای شما اصلاح کردم. کل محتویات این فایل رو جایگزین قالب فعلی (ویرایش CSS قالب فعلی) کنید:
  • ۲۴ ارديبهشت ۰۰ ، ۱۰:۵۴
  • Violet J Aron ❀
    • وای دستتون درد نکنه!! درست شد!!

    خیلی خیلی ممنونم ازتون :))

    ببخشید اذیتتون کردم.
  • ۰۶ خرداد ۰۰ ، ۲۱:۳۵
  • My Mood:Error,404, Not Found(جانم فدای اکسو) (خارج از مدار)(لیلین خرسیِ همه)(همزاد یونا*-*)
    • سلام... چرا هرکار میکنم نمیشه؟⁦ಥ_ಥ⁩
    پاسخ:
    سلام
    قالبتون بهم ریخته. از ابتدا یه قالب انتخاب کنید تا تغییرات ریست بشه، سپس فقط این چند خط رو به ابتدای قسمت «ویرایش CSS قالب فعلی» اضافه کنید.
    @font-face {
    font-family: 'Vazir';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v28.0.0/dist/Vazir-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    *:not(.fa) {
  font-family: Vazir !important;
}
  • ۱۰ خرداد ۰۰ ، ۱۲:۳۸
  • محمدحسین پارسائیان
    • سلام علیکم
    اگه می‌تونید فونت وزیرکد رو هم اضافه کنید برای وبلاگ‌هایی که برای برنامه‌نویسی هستن یا دراین زمینه‌ها فعالیت دارن
    حداقل اینه که فونت کدها رو وزیرکد می‌ذارن
    پاسخ:
    سلام
    این هم فکر خوبیه
  • ۱۲ خرداد ۰۰ ، ۱۱:۱۹
  • Mood:Error,404, Not Found(جانم فدای اکسو)(خارج از مدار)(لیلین خرسیِ ترانه و همه)(همزاد یونا*-*)
    • مرسی...درست شد ^-^
  • ۱۷ خرداد ۰۰ ، ۱۵:۱۵
  • سینا فرامرزیان
    • سلام سپاسگزارم
  • ۰۳ مرداد ۰۰ ، ۱۵:۴۹
  • محمد صادق عبداللهی
    • سلام استاد
    یک نکته ای رو در مورد jsdelivr بگم این که به جای [v[x].[y].[z کلمه latest رو استفاده کنید اینجوری آخرین نسخه باز میشه😁
    چون دیدم هر بار داخل فونت وزیر readme.md رو هم آپدیت می کنید اینجوری راحت ترید
    پاسخ:
    سلام و درود
    ممنونم برای اشاره به این نکته اما این روش (اصلا) توصیه نمیشه و بهتره که استفاده نشه. توی خود سایتش هم توضیح داده:
    https://www.jsdelivr.com/features
    «Omit the version completely or use "latest" to load the latest one (not recommended for production usage)»

    «Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing.»

  • ۰۴ مرداد ۰۰ ، ۱۲:۳۳
  • محمد صادق عبداللهی
    • خب شاید به خاطر این گفته که ممکنه تو نسخه های مختلف یه فریم ورک توابع تغییر کنند اما برای یه فونت 90 درصد کاربرا می خوان آخرین نسخه رو استفاده کنند
    البته شما درست می گید اما حداقل یه جا معرفی کنید بقیه هم بدونن من خودم خیلی دنبال این قابلیت گشتم
  • ۱۱ دی ۰۰ ، ۱۶:۵۶
  • ابوالفضل
    • واقعا مطلب مفیدی بود من استفاده کردم ممنون
  • ۰۵ خرداد ۰۲ ، ۱۱:۳۵
  • Arezoo Tehrani
    • من که عاشق قالب هاپی شما و آموزش هاتون هستم.
  • ۱۹ شهریور ۰۲ ، ۲۰:۱۴
  • آسیه سبز
    • ممنون واقعا خیلی کمک کردین از وقتی وبلاگم رو ساختم همش با فونت ها چالش داشتم .

    ارسال نظر

    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    تجدید کد امنیتی

    saber.rastikerdar بر روی جی‌میل گوگل
    github.com/rastikerdar
    twitter.com/rastikerdar
    instagram.com/rastikerdar

    پربیننده ترین مطالب
    ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم