صابر

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

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

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

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

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

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


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

Blog.ir بلاگ بیان

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

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

* {
  font-family: Sahel !important;
}

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

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


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

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

این روش کمی طولانی هست و ممکن است پیچیده باشد که می توانید از آن عبور کرده و مثل خود من مستقیما از روش ساده و میانبر استفاده نمایید.
برای این روش فایل 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


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

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

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/sahel-font/v1.0.0-alpha22/dist/font-face.css">


فونت وزیر:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/vazir-font/v19.0.0/dist/font-face.css">


قلم صمیم:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/samim-font/v2.0.1/dist/font-face.css">


قلم شبنم:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/shabnam-font/v4.0.0/dist/font-face.css">


قلم تنها:

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

و ...
البته به جای مثلا v1.0.0-alpha6 بهتر است آخرین ورژن فونت را قرار دهید. به هر صورت موارد بالا بدون مشکل کار می‌کنند.


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

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 داره و نه مثل میهن با اگه.
    منتظر پاسخ شما هستم.
    پاسخ:
    سلام
    متاسفانه از پنل مدیریت آن سرویس اطلاعی ندارم.
    سلام؛

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

    من از روش میانبر استفاده کردم و این کد رو خط بعد 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 است. کار خاصی نمی‌خواهد.
    وقتی سایت بلاگ.آی آر را سرچ می کنم سایت بیان را میآور ولی گزینه های گفته شده نیست!
    سلام
    ببخشید ،منظور شما از کد مرسوم ساده HTML چیست؟
    میشه بیشتر توضیح بدید؟
    سلام من فونت تنها رو وقتی میزارم آیکون نظرات و لایک خراب میشه چه جوری درستش کنم ؟
    پاسخ:
    سلام. احتمالا شما از کد کوتاه زیر استفاده کردین:
    * {
      font-family: Tanha !important;
    }
    من قصدم از اشاره به این کد در مطلب بالا برای این بود که سریع‌تر بتونین خروجی رو ببینید. این کد هر چیزی رو تغییر می‌دهد. اما راه صحیح‌اش اینه که این کد رو حذف کنید و سپس در کل CSS بگردین و اسامی فونت‌ها رو جداگانه به «تنها» یا هر فونت دیگری اختصاص بدین.
  • مجله اینترنتی هلو

  • سلام

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

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

    www.holoo1.ir

    ارسال نظر

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

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

    آخرین نظرات