no-img
اِمیلاسلام کاربر مهمان. امروز یکشنبه ۲۴ آذر ۱۳۹۸


ادامه مطلب

بروزرسانی؛
۱۸ شهریور ۱۳۹۸
اضافه کردن دو یا چند فونت به قالب وردپرس
امتیاز 5.00 ( 5 رای )
حمایت از emila.ir

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

بروزرسانی؛ ۱۸ شهریور ۱۳۹۸

{افزودن فونت به سایت} – {افزودن فونت به وردپرس}

ابتدا باید فونت دلخواه خودتون رو در این سه فرمت وجود دارد را در پوشه اصلی قالب وردپرستان (یک پوشه به نام fonts) قرار دهیدو اگر وجود نداشت، بسازید! این سه فرمت را در داخل آن قرار دهید (در صورتی که قالب نصب بود آپلود می کنید).

در مرحله بعد شما باید فایل استایل (style.css) یا همان شیوه نامه یا برای قالب های فارسی شده فایل rtl قالب را باز کنید و در خط های بعد از توضیحات قالب (معمولا شامل این موارده: نام قالب، طراح، ورزن و… )، کدی تقریبا شبیه زیر را پیدا می کنید: (در اینجا فرض کنید فونت فالب سایت شما (iransansdn) است:

@font-face {
font-family: "iransansdn";
font-style: normal;
font-weight: 400;
src: local("iransansdn"), local("fonts/iransansdn"), url("fonts/iransansdn.woff") format("woff"), url("fonts/iransansdn.ttf") format("truetype"), url("fonts/iransansdn.svg") format("svg");
}

فرض کنید که علاوه بر فونت iransansdn قصد دارید فونت IRANSansWeb را نیز به قالب اضافه کنید و از هر دو استفاده نمائید.

اکنون فونت مورد نظرتان (برای مثال IRANSansWeb) را به قالب اضافه می کنیم. مانند زیر:

@font-face {
font-family: "IRANSansWeb";
font-style: normal;
font-weight: 400;
src: local("IRANSansWeb"), local("fonts/IRANSansWeb"), url("fonts/IRANSansWeb.woff") format("woff"), url("fonts/IRANSansWeb.ttf") format("truetype"), url("fonts/IRANSansWeb.svg") format("svg");
}

یعنی نهایتا ما از هر دو کد بالا در کنار هم در فایل استایل پوسته وردپرس یا در قالب های فارسی شده در فایل rtl استفاده کردیم.

اکنون بخشی را که قصد دارید فونت مورد نظرتان آنرا نشان دهید ویراش کنید برای مثال :

h1, h2, h3, h4, h5, h6{
font-family: "iransansdn" !important;
}

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

h1{
font-family: "IRANSansWeb" !important;
}

یعنی نهایتا کدهای بالا به صورت زیر در استایل قرار خواهند گرفت:

h2, h3, h4, h5, h6{
font-family: "iransansdn" !important;
}

و

 h1{
font-family: "IRANSansWeb" !important;
}

بدین طریق از دو فونت مورد نظر در قالب وردپرس استفاده خواهد شد.


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=14099
designer