صفحه اصلی » آموزش » آموزش اضافه کردن فونت دلخواه به قالب‌های وردپرس

آموزش اضافه کردن فونت دلخواه به قالب‌های وردپرس

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

مزیت این روش آن است که با آپدیت کردن قالب، نیازی نیست مجدد فونت‌ها را در قالب قرار داده و کدها را به فایل‌های قالب اضافه کرد که می‌بایست تا حدودی با کدنویسی و خاصیت‌های CSS نیز آشنایی داشته باشید؛ لذا با هر بار آپدیت شدن قالب، به‌صورت دائمی می‌توانید فونت‌ها را برای همیشه در قالب وردپرسی مورد نظر خود داشته باشید.

با توجه به این که تقریباً تمامی قالب‌های وردپرس دارای بخشی با عنوان Custom CSS در پنل تنظیمات خود می‌باشند، شما می‌توانید طبق مراحل زیر به‌راحتی فونت دلخواه خود را به قالب سایت اضافه کنید. در این آموزش ما از فونت BYekan استفاده می‌کنیم که شما می‌توانید آن را به دلخواه خود تغییر دهید.

  1. ابتدا فونت یکان مخصوص وب با فرمت‌های مختلف (ttf ،svg ،eot و woff) را از اینجا دانلود کنید و سپس در روت هاست خود، مثلاً در قسمت public_html، آپلود کنید.
  2. فایل زیپ آپلود شده را در هاست Extract کرده تا پوشه مورد نظر (fonts) ساخته شود.
  3. حال می‌بایست فونت مورد نظر را به CSS قالب معرفی کنید. کدهای زیر را به قسمت Custom CSS قالب وب‌سایت خود اضافه کنید:
    @font-face {
    font-family: "BYekan";
    src: url("http://yoursite.com/fonts/BYekan.eot");
    src: url("http://yoursite.com/fonts/BYekan.eot?#iefix") format("embedded-opentype"),
    url("http://yoursite.com/fonts/BYekan.woff") format("woff"),
    url("http://yoursite.com/fonts/BYekan.ttf") format("truetype"),
    url("http://yoursite.com/fonts/BYekan.svg#fontname") format("svg");
    }
  4. در کدهای بالا، به‌جای yoursite.com آدرس وب‌سایت خود را وارد کنید.
  5. حال بخش‌های مورد نظر وب‌سایت خود را که می‌خواهید با این فونت بارگذاری شود، مطابق کد زیر به Custom CSS قالب اضافه کنید:
    body, h1, h2, h3, h4, h5, h6, .post-title, .entry, input, textarea, blockquote p, {
    			    font-family: "BYekan";
    			}

نکته 1: با همین روش می‌توانید سایر فونت‌های مورد نظر خود را نیز به قالب اضافه و معرفی کنید. توجه داشته باشید، در صورت استفاده از فونتی غیر از یکان، می‌بایست در کدهای بالا، به جای BYekan، نام فونت مورد نظر خود را بنویسید. هم‌چنین، شما می توانید فونت‌ها را در مسیر و یا پوشه‌ی دلخواه خود در هاست قرار دهید که در این صورت می‌بایست آدرس دقیق مسیر و نام فولدر مورد نظر خود را به جای آدرس و پوشه‌ی fonts در کدهای بالا بنویسید.

نکته 2: در صورتی که قالب وب‌سایت خود را تغییر دادید، می‌بایست مراحل 3 به بعد را در قسمت «Custom CSS» قالب جدید انجام دهید. لازم به ذکر است، در صورت آپدیت کردن قالب وب‌سایت، در حالت عادی، کدهای بالا در بخش «CSS دلخواه» قالب می‌ماند و نیازی به انجام مراحل فوق نیست.

منبع: beroozit.com

درباره به‌روز آی‌تی (میثم محمدی)

مدیر وب‌سایت به‌روز آى‌تی، متخصص آی‌تی، تجارت الکترونیک و بازاریابی، وب‌مستر و طراح وب‌سایت، مترجم زبان انگلیسی و دانشجوی دکترای مدیریت کسب و کار

۳ نظر

  1. عالی بود مهندس، دمت گرم
    از بس با تغییر یا آپدیت شدن قالب، مجبور شدم فونت و کد بذارم و عوض کنم، کلافه شده بودم. بهترین آموزشی بود که می تونستم ببینم. واقعاً نجاتم دادی و جالبه هیچ سایتی هم آموزش روش شما رو نذاشته و همه فقط از همدیگه کپی کردن! دستت درد نکنه و خسته نباشی.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *