تایپوگرافی یا استایل نوشته ها در وب سایت اهمیت زیادی برای کاربر دارد و از این حیث اخیرا اعتبار زیادی یافته است. اضافه کردن فونت به قالب وردپرس یکی از موضوعات پربازدید و در عین حال کاربردی است که قصد داریم در سون هاست به آن بپردازیم. راستش زیبایی ظاهر وب سایت شما می تواند اثر قابل توجهی بر جذب بازدیدکننده داشته باشد، البته فراموش نکنید که نباید پارامتر سرعت وب خود را فدای آن کنید. در ادامه همراه ما باشید تا اطلاعات بیشتری را با شما به اشتراک بگذاریم!
فونت های به کار رفته در سایت شما علاوه بر اثر گذاری بر ظاهر آن، سبب تمایز شما با سایرین خواهد بود. اضافه کردن فونت های مشابه اگرچه که میان کاربران رواج دارد، اما فونت هاس سفارشی زیبا به متفاوت و خاص بودن شما کمک می کند.
فونت های خسته کننده به رابطه شما با بازدیدکنندگان خدشه وارد می کند و نباید به این راحتی ها از آن چشم پوشید. همه ی ما به وب سایت های با فونت های جذاب و ساده علاقه داریم و از گشت و گذار در آن لذت می بریم.
از کجا فونت برای قالب سایت پیدا کنم؟
در حالت پیشفرض انتخاب های محدودی داریم و قالب ها با چندین فونت متفاوت ارائه نمی شوند، اما برای رفع نقص موجود باید خودمان دست به کار شویم. فونت های رایگان و پولی زیادی جهت استفاده در سایت ارائه شده است و شما با مجموعه بزرگی روبرو خواهید بود. اما برای کاربران فارسی زبان اخیرا سایت های مختلفی اقدام به طراحی و انتشار فونت های زیبا و کاربردی نموده اند که با جستجویی کوتاه در گوگل می توان به آن ها دسترسی یافت.
وب سایت های خارجی زیادی نیز به ارائه فونت های رایگان می پردازند، اما بهترین گزینه ی پیش روی شما استفاده از سرویس فونت وب گوگل Google Web Font Service است که خدمات فونت رایگان را به بیش از ۱۳۵ زبان دنیا ارائه می کند. اما خود را برای اضافه کردن فونت به قالب وردپرس محدود به مکان خاصی نکنید، چراکه ایده های نابی توسط توسعه دهندگان این بخش در سایت های مختلف وجود دارد.
تبدیل قلم به یک فرمت دوستانه ای وب برای اضافه کردن فونت به قالب وردپرس
قبل از هرچیز باید به این نکته توجه داشت که مرورگرهای وب از تمامی فونت های موجود پشتیبانی نمی کنند. اما اخم نکنید! اگر فونت دلخواه شما جزو فونت های پشتیباتی نشده باشد، هنوز راهی برای استفاده از آن وجود داشته و ما آن را با کمال میل آن را با شما به اشتراک خواهیم گذاشت.
شما باید فونت دلخواه خود را در سه فرمت قابل استفاده در وب تهیه کنید. سه فرمت مختلف TTF، EOT و WOFF بیشتر در وب سایت های مختلف مورد استفاده قرار می گیرند. اما از آنجایی که فرمت TTF عمومیت بیشتری داشته و در تمامی مرورگرها سازگاری دارد، نسبت به سایر فونت ها مورد استفاده بیشتری قرار می گیرد.
مسئله دیگر خرید لایسنس فونت دلخواه شماست، اگرچه که فونت های رایگان وجود دارد اما استفاده از برخی فونت های تجاری نیز به صورت غیرقانونی و بدون پرداخت هزینه لایسنس در میان برخی کاربران رواج یافته است. برای حمایت از اثر طراحان خوش ذوق ایرانی و رعایت حقوق کپی رایت شایسته است که نسبت به خرید لایسنس فونت مورد نیاز خود اقدام کنید و این اقدام اخلاق منشانه را مدنظر خود قرار دهید. 😊💖
اغلب فونت ها با فرمت ttf وجود دارند و فرمت دیگری از آن ها ساخته نشده و در صورت نیاز به دو فرمت woff و eot برای استفاده در وب دارید، می توانید از ابزاری به نام Web Font Generator tool بدین منظور استفاده کنید. شما هر فونتی با هر فرمتی که داشتید، با استفاده از این ابزار می توانید آن را به فرمت های قابل استفاده در وب تبدیل کنید و در نهایت نسبت به اضافه کردن فونت به قالب وردپرس اقدام نمایید.
همینطور می توانید عباراتی مانند convert ttf to eot را در گوگل مورد جستجو قرار دهید و از ابزار آنلاین جهت تبدیل فرمت استفاده کنید.
خب کم کم بریم سراغ بخش عملیه کار… دوتا روش روب بهتون پیشنهاد می کنم اول روش دستی واسه اونایی که به کد نویسی آشنا هستن و دوم از طریق افزونه که مخصوص مبتدیا هست😎 همیشه دوس داشتم نیمه پنهانمو پیدا کنم تا میخوره بزنمش که دیگه قایم نشه، والا من گشتنم خوب نیس😁
اضافه کردن فونت به قالب وردپرس با کدنویسی
اگر از سنگین کردن وب سایت خود با نصب افزونه های مختلف دل خوشی ندارید، می توان به اضافه کردن فونت به قالب وردپرس به صورت دستی پرداخت. این روند آنچنان سخت نیست؛ شما باید ابتدا فایل فونت را به هاست خود آپلود کنید و سپس پرونده CSS را ویرایش کنید. اما اگر نیاز به دستورالعمل دقیقی دارید، باید از اینجای مطلب را با آموزش تصویری ما همراه باشید. مراحل اضافه کردن فونت به قالب وردپرس به صورت گام به گام به شرح زیر می باشد.
گام اول: تهیه فونت مورد نظر
در مرحله اول مطابق توضیحات ارائه شده در اول مطلب باید فونت دلخواه خود را دانلود کنید و آن را از منظر سازگاری با مرورگرهای وب مورد بررسی قرار دهید. به عنوان مثال من فونت ایران سانس وب را برای اضافه کردن به وردپرس انتخاب نموده ام. توجه داشته باشید بعد از خریداری فونت، فایل فشرده ای در اختیار شما قرار می گیرد که باید آن را ابتدا استخراج نمایید.
گام دوم:آپلود فایل جهت اضافه کردن فونت به قالب وردپرس
حال باید فونت را از طریق فایل منیجر یا اف تی پی به فضای هاست آپلود نمایید. مسیر دایرکتوری جهت انجام این اقدام مسیر زیر می باشد:
Public_html/wp-content/themes/your-theme/fonts
نکته مهم: توجه داشته باشید شما باید فونت را به پوشه fonts آپلود کنید و منظور از your-theme در دایرکتوری بالا نام قالب شما می باشد. همچنین اگر کار با دو فضای فایل منیجر و اف تی پی را تجربه ننموده اید، پیش تر دو پست با نام های مدیریت فایل در سی پنل Cpanel و چگونگی مدیریت فایل با اکانت اف تی پی FTP Account در سی پنل برای آشنایی بیشتر شما منتشر گردیده که خواندن آن اطلاعات شما را به روز خواهد نمود.
به عنوان مثال، مطابق تصویر زیر ما در این مرحله فایل IRANSansWeb.ttf را در این مسیر بارگذاری می کنیم:
توجه داشته باشید شما می توانید با داشتن فایل با دو پسوند woff و woff2 نیز فرایند اضافه کردن فونت به قالب وردپرسی را انجام دهید، ابزار Web Font Generator tool این امکان را به راحتی برایتان فراهم نموده است.
گام سوم: اضافه کردن کد های مورد نیاز فونت به وردپرس
اکنون باید به پیشخوان وردپرس خود وارد شده و به مسیر نمایش و سپس ویرایشگر پوسته مراجعه کنید. حال فایل style.css را پیدا کنید و کد زیر را در همان قسمت های ابتدای فایل که دارای کد @font-face می باشد، اضافه کنید: ( برای مطابقت با فونت خود حتما url و نام آن را تغییر دهید.) علاوه بر این اگر دارای فایل rtl بودید در آن نیز کد بالا را اضافه کنید.
@font-face {
font-family: IRANSansWeb;
src: url(https://7host.dev/wp-content/themes/twentyseventeen/fonts/IRANSansWeb.ttf);
font-weight: normal;
} در پایان برای اعمال تغییرات صورت گرفته به روی دکمه بروزرسانی پرونده کلیک کنید.
با کدی که به قالب اضافه کردیم برای فونت، خانواده ای به نام IRANSansWeb در نظر گرفتیم که برای تمامی قسمت های مورد نیاز به این فونت، باید به کلاس قالب اضافه و فراخوانی شود. بدین منظور کل فایل استایل را بررسی نموده و هرجا کد Font-family مشاهده نمودید، مقدار آن را به عبارت زیر تغییر دهید:
font-family: IRANSansWeb;
اگر هم احیانا در جایی چندین نام در مقابل آن قرار گرفته بود، اولین فونت را به IRANSansWeb تغییر دهید و بقیه را بدون تغییر قرار دهید:
font-family: 'IRANSansWeb', 'Helvetica Neue', sans-serif;
کد @font-face بعد از هر بار بازکردن وب سایت شما توسط کاربر اجرا می شود، با این حال فونت هنوز برای هر عنصر اعمال نمی شود. بنابراین، شاید در نگاه اول متوجه تغییرات اعمال شده نشوید. پس برای اختصاص فونت به یک عنصر خاص، باید همان فایل style.css را ویرایش کنید. به عنوان مثال کد زیر فونت IRANSansWeb را برای عنوان وب سایت ما اعمال می کند.
.site-title {
font-family: " IRANSansWeb ", Arial, sans-serif;
} نحوه اضافه کردن فونت به قالب وردپرس از طریق افزونه
اما راه ساده ای نیز وجود دارد که بدون دردسر تغییرات دلخواه شما را بوجود می آورد. این روش بیشتر مورد استقبال افراد تازه کار وردپرس قرار گرفته و به سادگی می توان در آن به اضافه کردن فونت به قالب وردپرس پرداخت.
شما با نصب افزونه وردپرس Use Any Font می توانید به راحتی فونت های دلخواه خود را در وب سایتتان نمایش دهید. این افزونه دارای امتیاز بالایی می باشد و توانسته در مدت انتشار خود بیش از ۱۰۰ هزار کاربر را ترغیب به نصب نماید.
اما خبر بد اینکه این افزونه از حالت رایگان درآمده و اخیرا لایسنس نسخه های جدید آن حتما باید از طریق سایت افزونه خریداری شود. هنوز افزونه ای کاربردی و قابل اعتماد به جای این افزونه به صورت رایگان پیدا نشده که به شما ارائه دهیم. اما جای نگرانی نیست! چراکه به زودی این امکان را برای شما مهیا خواهیم کرد و در آینده ای نزدیک افزونه ای را جهت اضافه کردن فونت به قالب وردپرس معرفی می کنیم.
با جستجو در تمامی بخش های وبلاگ سون هاست قادر به دستیابی به مطالب روز جهت توسعه ایده های خود خواهید بود. هچنین به صورت تخصصی در بخش آموزش وردپرس به موضوعاتی پرداخته شده که بیشتر مورد نیاز کاربران وردپرس قرار دارد.
قسمت آخرو به دل نگیرین واقعا افزونه درست و حسابی نیست… حالا پیداش میکنم براتون😅
