آموزش نصب فونت روی قالب آوادا و تنظیمات فونت

با آموزش نصب فونت روی قالب آوادا همراه شما هستیم و کلیه تنظیمات فونت avada را از بخش Typography بررسی خواهیم کرد به این شکل قادر هستید هر نوع font که در نظر دارید را روی قالب آوادا نصب کنید و حتی فونت بخش های دلخواه خود در سایت را تغییر دهید و شخصی سازی کنید.

تنظیمات تایپوگرافی Typography قالب avada وردپرس

فونت های قالب وردپرسی تاثیر بسیار زیادی در زیبایی و ظاهر وبسایت شما دارند بنابراین توصیه میکنیم تایپوگرافی قالب خود را بررسی و شخصی سازی کنید. میتوانید از یک Font Family استفاده کنید یا از میان فونت‌های خانواده Google انتخاب کنید یا حتی این امکان را دارید که فونت سفارشی مورد نظر خودتان را در قالب آپلود و سپس اعمال کنید. قالب آوادا تنطیمات گسترده ای برای شخصی سازی تایپوگرافی سایت ارائه کرده طوری که میتوانید از بخش های خاص مثل منوهای سایت، بخش های خاص، هدینگ ها تا بدنه سایت را بنابر سلیقه خود شخصی سازی کنید و در هر بخشی فونت مورد نظرتان را اعمال کنید. در ادامه قصد داریم به طور کامل تنظیمات بخش Typography قالب آوادا را بررسی کنیم.

تنظیمات فونت در قالب آوادا وردپرس

به کمک آموزش ورود به پیشخوان وردپرس وارد وبسایت خود شوید. در ستون سمت راست صفحه روی منوی Avada کلیک کنید و زیرمنوی Options را انتخاب کنید تا به بخش تنطیمات قالب آوادا هدایت شوید.

در کادر باز شده روی گزینه Typography کلیک کنید تا کلیه تنظیمات مربوط به فونت های قالب آوادا نمایش داده شود.

بخش Typography دارای 4 زیر منوی کلی به شرح زیراست که در هر کدام میتوانید تنطیمات خاصی را اعمال کنید.

• Global Typography: تنظیمات کلی فونت های سایت
• Body Typography: تنظیم فونت بدنه قالب
• Heading Typography: تنظیم فونت تیترهای داخل سایت از H1 تا H6 و تغییر رنگ و سایز فونت ها
• Custom Fonts: امکان نصب فونت های سفارشی مورد نظر

آموزش نصب فونت روی قالب آوادا و شخصی سازی

در بخش Typography از تنظیمات قالب avada روی زیرمنوی Custom Fonts کلیک کنید در این بخش می توانید هر فونت دلخواهی که در نظر دارید را روی قالب تعریف یا اصطلاحا نصب کنید سپس در بخش های دلخواه این فونت را انتخاب میکنید تا روی بخش مد نظر اعمال شود. ابتدا در بخش Font Name نام فونتی که قصد دارید آپلود کنید را بنویسید.

با انتخاب گزینه های این بخش، تنظیمات فونت استاندارد گوگل لغو خواهد شد. توجه داشته باشید فونتی که میخواهید بر روی قالب ست کنید را باید با پسوند های خواسته شده آپلود کنید (جهت حذف بر روی remove و جهت آپلود بر روی upload مقابل فیلد کلیک کنید). پیشنهاد میکنیم از فرمت های woff و woff2 استفاده شود.

• woff: یک نسخه فونت که مخصوص وب است. در این قسمت می توانید فونت سفارشی با پسوند woff را آپلود کنید.
• woff2: نسل بعدی فونت های woff است که یک نسخه فشرده از فایل فونت شماست. این فرمت در نسخه فعلی اینترنت اکسپلور یعنی نسخه 11 پشتیبانی نمی شود.
• ttf: فرمت TTF هم از سمت ماکروسافت و اپل ارائه شده و عموما در ویندوز و نرم افزارهایی مثل فتوشاپ و… مورد استفاده قرار میگیرد بنابراین فونت سنگینی محسوب می شود و تا حدودی روی سرعت بارگذاری تاثیرگذار است.
• eot: یک نسخه فونت مخصوص وب که از سمت ماکروسافت ارائه شده اما متاسفانه تنها در مرورگر IE یا همان اینترنت اکسپلور قابلیت پشتیبانی دارد و فعلابرای این آموزش چندان کاربردی نیست.
• svg: فونت SVG حالتی برداری دارد و و با قابلیت مقیاس پذیر بودن امکانات ایجاد تحرک در کاراکترها و ساخت انیمیشن های متحرک را دارد.

بنابراین برای آپلود فایل روی آیکن upload مقابل پسوند کلیک کنید.

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

به محل ذخیره فونت ها بروید و فایل فونت را انتخاب کنید به پسوند فونت دقت داشته باشید. به عنوان مثال اگر در بخش Custom Fonts وردپرس، روی دکمه upload مقابل woff2 کلیک کردید پس زمان بارگذاری فونت هم دقیقا باید فایل فونتی با پسوند woff2 را انتخاب کنید.

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

اگر در این مرحله با خطا مواجه شدید توضیحات قسمت بعدی یعنی “رفع خطا هنگام آپلود فایل فونت در وردپرس” را مطالعه کنید و سپس مجددا فایل ها را بارگذاری کنید.

رفع خطا هنگام آپلود فایل فونت در وردپرس

دقت داشته باشید به صورت پیش فرض امکان آپلود برخی پسوندهای فایبل در وردپرس وجود ندارد و باید به صورت دستی اجازه بارگذاری این نوع فایل ها را صادر کنید پس چنانچه زمان آپلود فایل های فونت با خطایی مشاهده تصویر زیر مواجه شدید و مشکل آپلود فونت در وردپرس را داشتید، می بایست تغییراتی را در قالب خود ایجاد کنید و به وردپرس بگویید که ایرادی ندارد و مجاز است که این فایل را آپلود کند! 😀 میتوانید از افزونه WP Extra File Types کمک بگیرید یا به محل نصب وردپرس مراجعه کرده و قطعه کد زیر را به  فایل wp-config.php وردپرس اضافه کنید. این کد اجازه آپلود هر نوع فایلی را میدهد پس جهت پیشگیری از مشکلات امینتی پس از آپلود فایل های فونت، این قطعه کد را حذف کنید.

define('ALLOW_UNFILTERED_UPLOADS', true);

اگر برای رفع این مشکل به راهنمایی بیشتری نیاز داشتید، میتوانید آموزش افزودن فرمت غیرمجاز برای آپلود در وردپرس را مطالعه کنید.

ادامه مراحل نصب فونت فارسی در قالب آوادا

به همین ترتیب تمامی فونت های مورد نظرتان را آپلود و در وردپرس معرفی کنید. در صورتیکه نیاز داشتید خانواده فونت دیگری را هم تعریف کنید می توانید روی دکمه Add کلیک کنید. در آخر روی دکمه Save Changes کلیک کنید تا تغییرات دخیره شود.

برای حذف هر کدام از این ردیف ها هم می توانید روی آیکن Delete کلیک کنید.

تنظیمات فونت قالب آوادا و سفارشی سازی با Global Typography

تنظیمات عمومی فونت های سایت از بخش Global Typography قابل پیکربندی است به طور خیلی سریع میتوانید مشخص کنید هر بخش از سایت چه فونتی داشته باشد این قسمت تنظیمات فونت استاندارد را لغو می کند. فونت بخش هایی مثل عناوین و زیرعنوان ها، بدنه و… در این قسمت قابل تغییر است مثلا در قسمت Headings می توانید یک font family برای متن عناوین یا heading های سایت انتخاب کنید. جهت انتخاب فونت، لیست کشویی مقابل این گزینه را باز نمایید. یا در بخش Body می توانید یک font family برای متن بدنه یا سایت انتخاب کنید.

برای تنظیمات بیشتر هر بخش، می توانید به زیرمنوی مرتبط با همان بخش که در قسمت Typography قرار دارد مراجعه کنید.

تغییر فونت بدنه قالب آوادا وردپرس از طریق Body Typography

در این قسمت میتوانید کلیه فونت های بدنه سایتتان را تنظیم کنید هر آنچه در بدنه وبسایت شما قرار بگیرد با تنظیماتی که در این بخش برای فونت ها اعمال میکنید نمایش داده می شود.

قبل از ایجاد تغییرات کلیدهای ctrl+f5 را بزنید تا صفحه رفرش شود.

• Font Family: در این بخش تعیین میکنید که از کدام فونت استفاده شود؟
• Variant: در حالت پیش فرض روی عدد 400 تعیین شده است در فونت فارسی کارایی خاصی ندارد.
• Font Size:سایز مورد نظرتان برای فونت را مشخص کنید.
• Line Height: فاصله بین خطوط را مشخص کنید.
• Letter Spacing: در این بخش فاصله بین کاراکترها یا حروف را تعیین کنید.
• Font Color: رنگ فونت را تعیین کنید با کلیک روی دایره رنگی می توانید به صورت زنده یک رنگ را انتخاب کنید یا کد رنگ را در فیلد Font Color وارد کنید.

• Link Color: در این قسمت رنگ لینک های سایتتان را مشخص میکنید که عموما به رنگ آبی هستند.
• Link Hover Color: رنگ هاور لینک ها را تعیین کنید یعنی زمانیکه موس کاربر از روی لینک عبور کرد، رنگ آن تغییر کند.
• Enable Link Text Decoration: منظور از Decoration حالات تزئینی لینک شماست به عنوان مثال خطی زیر لینک شما ظاهر می شود.

تغییر فونت تیترهای سایت از بخش Heading Typography

در بخش Heading Typography که زیرمنوی Typography از تنظیمات آوادا است می توانید مشخص کنید که هر هدینگ از h1 تا h6 در سایت شما دارای چه ویژگی هایی باشند به صورت کلی امکان مشخص کردن فونت هدینگ ها، رنگ، سایز فونت و… از این بخش امکان پذیر است.

در بخش H1 Headings Typography می توانید فونت و رنگ عناوین H1 را مشخص کنید. در قسمت Font Family فونت دلخواهتان را انتخاب کنید. در فیلد Font Size نیز می توانید سایز دلخواه خود را مشخص کنید. سایر پیشفرض این بخش 64 پیکسل است که البته شما باید براساس قالب و ویژگی های مد نظرتان این عدد را تغییر دهید. در فیلد Font Color نیز رنگ تیترهای h1 سایتتان را تعیین کنید. در قسمت Margin Top میتوانید حاشیه بالا و در قسمت Margin Bottom حاشیه پایین را مشخص کنید که براساس واحد em است.

باتوجه به توضیحات زیر تمامی تنظیمات مربوط به هدینگ 1 تا 6 (H1-H6) را تنظیم کنید.

• Font Family: فونت مورد نظرتان را از این کشو انتخاب کنید.
• Font Size: اندازه فونت را تعیین کنید.
• Line Height: فایله بین خطوط را مشخص کنید.
• Letter Spacing: فاصله بین حروف را تعیین کنید این قابلیت هم در زبان فارسی کاربرد خاصی ندارد.
• Text Transform: این قسمت برای وبسایت های انگلیسی زبان کاربردی است در حقیقت میتوان تعیین کرد حروف به صورت کوچک، بزرگ یا ترکیبی از هردو باشند و این تبدیل حروف اتوماتیک صورت گیرد.
• Margin Top: حاشیه از بالا چقدر باشد؟
• Margin Bottom: حاشیه از پایین.
• Font Color: رنگ فونت را انتخاب کنید.

در قسمت H2 Headings Typography می توانید کلیه تنظیمات مربوط به تیترهای h2 سایت را تنظیم کرد. می توانید اندازه فونت عناوین H2 را بر اساس پیکسل مشخص کنید. با کشیدن میله ی لغزنده می توانید سایز دلخواه خود را مشخص کنید. سایر پیشفرض این بخش 48 می باشد اما آن را متناسب با اندازه سایر هدینگ ها تنظیم کنید. h2 باید کمی کوچکترا ز h1 باشد.

قسمت بعدی برای تنظیم اندازه فونت عناوین H3 بر اساس پیکسل است. رنگ و فونت و سایز تیترهای h3 را نیز مشخص کنید.

به همین ترتیب امکان تنظیم مشخصات هدینگ 4 هم وجود دارد پیشنهاد میکنیم تنها فونت و اندازه آن را تغییر دهید.

کمی اسکرول کنید، در بخش H5 Headings Typography تنظیمات هدینگ 5 را اعمال کنید.

و درنهایت به بخش H6 Headings Typography میرسید که مربوط به هدینگ 6 سایت شما است که وچکترین تگ هدینگ برای تیترها می باشد.

اگر بعد از تغییر فونت بخش های مختلف سایت مشاهده کردید برخی صفحات مثل تک پست ها یا صفحات آرشیو همچنان مثل سابق هستند و هیچ تغییراتی روی فونت این بخش ها اتفاق نیفتاده تنها کافیست تنظیمات بخش Post Title Typography را سفارشی سازی کنید. در بخش Post Title Typography می توانید عناوین تک پست های سایت یا صفحات آرشیو سایت را تنظیم کنید.

فونت بخش هایی مثل قسمت نظرات، عنوان نام نویسنده، پست های مرتبط و… را در قسمت Post Title Extras Typography تنظیم کنید که دقیقا مثل بخش های قبلی قابل پیکربندی است.

مثل بخش های قبلی از کشوری Font Family نام فونت دلخواهتان را انتخاب کنید. با توجه به ظرافت این بخش ها پیشنهاد می کنیم از فونت های bold استفاده نکنید. Font Size را تنظیم و اندازه دلخواه را بنویسید و در آخر روی دکمه Sava Changes کلیک کنید تا کلیه تنظیمات دخیره شوند.

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

سوالات متداول درباره نصب فونت و عوض کردن فونت قالب آوادا

نتیجه گیری

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