اضافه کردن فونت به المنتور از مسائل اساسی است که هر طراح سایتی با آن روبرو خواهد شد. در این جلسه از آموزش طراحی سایت با وبسکو همراه باشید که اضافه کردن فونت به المنتور را بدون کدنویسی و از طریق پیشخوان وردپرس و همچنین به وسیله کد های CSS نیز به شما آموزش دهم.
اضافه کردن فونت به المنتور
شما وقتی وبسایتی را می خواهید طراحی کنید باید به انتخاب فونت هم اهمیت بدهید زیرا با همین فونت و استایل هاست که می توانید سایتی را به صورت شکیل و حرفه ای طراحی کنید. وقتی فونت مناسبی را انتخاب کنید می توانید به سایت خودتون نیز رسمیت ببخشید و با توجه به موضوع سایت خود از فونت های متفاوت استفاده کنید. اگر وبسایتتون رسمی است از فونت های رسمی و برعکس.
یادتون نره که اگر بیش از حد فونت اضافه کنید باعث کاهش سرعت سایتتون می شود
اگر شما المنتور را نصب کردید و دیدید این بخش از آموزش درون آن نبود باید بدانید که این قسمت یعنی فونت های سفارشی و اضافه کردن فونت به المنتور در المنتور پرو برای شما فعال خواهد شد. پس اگر هنوز این افزونه را تهیه نکردید می توانید با قیمت ناچیزی از صفحه دانلود المنتور پرو این کار را انجام دهید و با کد تخفیف webesco شما دانشجویان طراحی سایت تخفیف نیز دریافت کنید.
آشنایی با وزن های فونت در افزونه المنتور
- وزن 100 – Thin
- وزن 200 – Extra Light (Ultra Light)
- وزن 300 – Light
- وزن 400 – Normal
- وزن 500 – Medium
- وزن 600 – Semi Bold (Demi Bold)
- وزن 700 – Bold
- وزن 800 – Extra Bold (Ultra Bold)
- وزن 900 – Black (Heavy)
آموزش اضافه کردن فونت در المنتور | روش اول
در مرحله اول اضافه کردن فونت به المنتور باید وارد پیشخوان وردپرس خودتون شوید و همان طور که گفتم اگر افزونه المنتور پرو را نصب کرده باشید (اگه هنوز یاد نگرفتید افزونه ها را نصب کنید حتما جلسه آموزش نصب افزونه وردپرس را ببینید) در زیر منو المنتور وارد قسمت فونت های سفارشی بشید.
حال وارد صفحه ای جدید می شوید که در اینجا باید بر روی دکمه اضافه کردن بالای صفحه کلیک کنید.
با کلیک بر اضافه کردن وارد مرحله جدیدی از اضافه کردن فونت به المنتور می شوید که در اینجا باید نام فونت خود را وارد کنید. به شما پیشنهاد می کنم که از نام های انگلیسی استفاده کنید و بعد از آن بر روی اضافه کردن فونت های متفاوت کلیک کنید.
در صفحه جدیدی که وارد می شوید باید فونتی که می خواهید را در فرمت های مختلفی که ازتون می خواد بارگذاری کنید و نگران نشوید اگر فونتی دارید که همه فرمت ها را ندارد و هر فرمتی را داشتید بارگذاری کنید. از قسمت وزن لالا سمت راست هم می توانید وزن فونت خود را مشخص کنید مثل 100 تا 900 که هر چی عدد بالاتر رود فونت شما درشت تر و توپر تر خواهد شد. برای اینکه وزن های مختلف را وارد کنید کافیه باز بر روی اضافه کردن فونت های متفاوت کلیک کنید و نوع جدید را بارگذاری کنید به همین راحتی شما کار اضافه کردن فونت به المنتور را به پایان رسانده اید.
آموزش اضافه کردن فونت با CSS به قالب وردپرس
خبر خوب اینجاست که افرادی که دوست ندارند قالب خود را سنگین تر کنند و به جای آموزش اضافه کردن فونت به المنتور می توانید کد های سی اس اس که در اختیارتون قرار می دهم را در استایل قالب خود قرار دهید. برای این کار باید وارد پیشخوان وردپرس خود شوید و از قسمت نمایش وارد ویرایشگر پوسته شوید و کدی که در اختیارتون قرار می دهم را وارد فایل style.css بکنید.
یادتون نرود که وقتی می خواهید این کار را انجام دهید باید کد ها را به استایل چایلد قالب هلو المنتور اضافه کنید نه خود قالب اصلی
@font-face {
font-family: Iransans;
font-style: normal;
font-weight: 400;
src: url('link font .eot');
src: url('link font .eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('link font .woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('link font .woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('link font .ttf') format('truetype');
} font-family اسم فونت شماست که دلخواه باید قرار بدی و در هر کجا که دوست داشتی المان آن فونت را استفاده کند به کلاس المان بدید و یا اینکه میتوانید به کل بدنه سایت بدید.
body{font-family: iransans;}
link font نیز لینک مربوط به فرمت وب فونت ها می باشد که باید دستی آپلود کنید و لینک بدهید.
font-weight نیز وزرن فونت شما می باشد.
همچنین در آخر بدانید که تمام فرمت هایی که در کد بالا هست را باید برای فونت در این حالت آپلود کنید که برای مرورگر های متفاوت به درستی عمل کند.