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

یکی از مشخصات مهم وبسایت ظاهر آن است. ظاهر وبسایت نقش مهمی در جذب مخاطبان و ارتقای رتبه وبسایت دارد. یکی از اصول بهینه سازی و سئو وبسایت بهینه کردن ظاهر سایت است. بطور میانگین بیشتر از 80% وب پیج از متن تشکیل شده است. ظاهر متن وبسایت توسط فونت آن مشخص می شود. ممکن است بخواهید به قالب پروتواستار جوملا (Protostar) فونت خاصی اضافه کنید که بین فونت های وب استاندارد مثل Arial، Tahoma و Georgia و غیره نیست. برای انجام این کار لازم است اقدامات زیر را انجام دهید.

گام اول: فایل فونت های مورد نظر خود را به پوشه ای در دایرکتوری نصب جوملا منتقل کنید

گام دوم: این فونت ها را در استیل شیت سفارشی خود با استفاده از دستور font-face@ معرفی کنید

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

گام اول: فایل فونت های مورد نظر خود را به پوشه ای در دایرکتوری نصب جوملا منتقل کنید؛ گام دوم: این فونت ها را در استیل شیت سفارشی خود با استفاده از دستور font-face@ معرفی کنید؛ گام سوم: فونت مشخص شده را در کلاس های تعیین شده استفاده کنید یا از یک شناسه در استیل شیت خود استفاده کنید

آموزش عملی تغییر فونت وب پیج

گام اول – انتقال فایل فونت به پوشه تمپلیت جوملا

به عنوان گام اول، لازم است که فایل های خود را آماده سازید، که به مرورگر می گویند فونت را چگونه اجرا کند. مرورگرهای مختلف به انواع مختلفی از فایل فونت نیاز دارند:

فونت های با پسوند .ttf – در بسیاری از مرورگرها عمل می کند به استثنای اینترنت اکسپلورر و آیفون

فونت های با پسوند .eot – فقط در اینترنت اکسپلورر (IE) عمل می کند

فونت های با پسوند .woff – نسخه فشرده فونت ها است و یک استاندارد نوظهور است

فونت های با پسوند .svg – در آیفون و ایپد عمل می کند.

می توانید کیت سبک فونت های خاص (font-face@) را از وبسایت های دیگر مثل fontsquirrel.com رایگان تهیه کنید، یا می توانید این فایل ها را از عرضه کنندگان خریداری نمایید. به هر حال نوع و منبع تهیه فونت به علاقه و نیاز توسعه دهنده وب یا مالک وب سایت بستگی دارد. به هر حال در نظر داشته باشید که کیفیت فونت های مختلف با هم فرق دارد و همه انواع فونت را نمی توان برای قالب بندی وب پیج و صفحات سایت استفاده کرد.

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

در هر صورت به عنوان گام اول در تغییر فونت سایت، بایستی فونت مناسب را تهیه کرده و در پوشه ای به نام fonts در دایرکتوری قالب Protostar کپی کنید. مسیر فونت های شما بایستی بدین صورت باشد: /templates/protostar/fonts

برای ایجاد این ساختار، با استفاده از کلاینت ftp یا مدیر فایل پنل کاربری هاستینگ وبسایت از قبیل سی پنل یا دایرکت ادمین، پوشه محل نصب جوملای خود را باز کنید. سپس وارد پوشه templates شده و پوشه protostar را باز کنید. در این پوشه یک فلدر به نام fonts بسازید و فونت های دلخواه خود را در آن کپی کنید.

گام دوم – ویرایش فایل استیل شیت سفارشی

به عنوان گام دوم این پروسه، بایستی فایل استیل شیت سفارشی خود (custom.css) را ویرایش کرده و سبک @font-face را به آن اضافه کنید. اگر هنوز فایل استیل شیت سفارشی نساخته اید یا مطمئن نیستید که چگونه یک فایل استیل شیت سفارشی به قالب جوملا اضافه کنید، مقاله افزودن استیل شیت سفارشی به قالب پروتواستار را بخوانید. در اینجا یک مثال از استفاده سبک font-face@ برای مشخص کردن فونتی بنام فونت یکان آمده است. این قطعه کد بایستی به ابتدای فایل استیل شیت اضافه شود.

نکته: استفاده از فایل استیل شیت سفارشی الزامی نیست و می توانید این قطعه کد را به ابتدای فایل template.css اضافه کنید و تمامی موارد تکرار font-family در استیل شیت را تصحیح کنید. اما با هر بار به روزرسانی جوملا، این تغییرات از بین خواهد رفت و بایستی از نو سبک بندی کنید. می توانید قطعه کد زیر را به عنوان قالب استفاده کرده و نام فونت مورد نظر خود را با نام فونت یکان عوض کنید.

نکته: استفاده از فایل استیل شیت سفارشی الزامی نیست و می توانید این قطعه کد را به ابتدای فایل template.css اضافه کنید و تمامی موارد تکرار font-family در استیل شیت را تصحیح کنید. اما با هر بار به روزرسانی جوملا، این تغییرات از بین خواهد رفت و بایستی از نو سبک بندی کنید. می توانید قطعه کد زیر را به عنوان قالب استفاده کرده و نام فونت مورد نظر خود را با نام فونت یکان عوض کنید.

@font-face {
    font-family: 'yekan';
    src: url('../fonts/ yekan.eot');
    src: url('../fonts/ yekan.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ yekan.woff') format('woff'),
    url('../fonts/ yekan.ttf') format('truetype'),
    url('../fonts/ yekan.svg#yekan') format('svg');
}

گام سوم – ویرایش دستور font-family

به عنوان گام سوم، از نام فونت تعیین شده در گام دوم برای پیکربندی font-family استفاده می شود. در اینجا یک مثال آمده است که در آن کلاس titlefont به فونت مورد نظر یعنی yekan ست شده است.

.titlefont { font-family: "yekan", Impact, sans-serif}

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

حال اگر کلاس titlefont را به متنی از وب پیج تخصیص دهید، متن به فونت مورد نظر شما که در اینجا فونت yekan است، ظاهر خواهد شد.

راه های دیگر تخصیص فونت سفارشی

شما می توانید مراحل یک و دو را انجام داده، سپس کاری کنید که سبک پیش فرض پروتواستار منعکس کننده آن فونت خاص باشد. مثلا فرض کنیم می خواهید تگ های <h1> و <h2> سایت خود را به فونت جدید ست کنید. می توانید به سادگی در فایل استیل شیت سفارشی خود دستور زیر را گنجانده و این عمل انجام می شود، اگر که فایل استیل شیت سفارشی خود را به طور صحیح فراخوانی کنید. همیشه سبک تعیین شده در فایل custom.css بر سبک تعیین شده در فایل template.css اولویت داشته و آن را رونویسی می کند.

h1, h2 {font-family: "yekan", Impact, sans-serif;}

طریقه استفاده از فونت های گوگل

می توانیم از فونت های گوگل در وبسایت جوملا استفاده کنیم. زمانی که از فونت های گوگل استفاده می شود، لازم نیست که فایلی در سایت آپلود شود یا فراخوانی برای @font-face در استیل شیت انجام شود. فقط کافی است مرجعی به فونت به سایت اضافه شود. هرچند هنوز لازم است که فونت برای تگ ها یا کلاس های خاص استیل شیت تخصیص داده شود.

برای مشاهده لیست فونت های موجود و انتخاب فونت دلخواه خود، به دایرکتوری فونت گوگل سری بزنید. فونت دلخواه خود را انتخاب کنید، سپس گزینه Add to Collection را بزنید. سپس در پایین صفحه گزینه Use را انتخاب کنید. این عمل شما را به صفحه بعد هدایت می کند. در این صفحه وزن فونت (font-weight) و سایر مشخصات حروف فونت را برای زبان مورد نظر خود تعیین می کنید.

پس از انتخاب مشخصات فونت، به پایین صفحه رفته و یک قطعه کد را می بینید که بایستی آن را کپی کرده و در فایل index.php قالب پروتواستار یا تمپلیت دیگری که استفاده می کنید، درج کنید. حتما قبل از درج این قطعه کد، از فایل یا تمپلیت خود یک نسخه پشتیبان تهیه کنید. این قطعه کد را بایستی در داخل تگ <head> فایل ایندکس قرار دهید. کد چیزی شبیه به قطعه کد زیر خواهد بود:

<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:400,700' rel='stylesheet' type='text/css'> 

طریقه استفاده و درج این کد در کلاس ها یا تگ های فایل استیل شیت در پایین این صفحه نمایش داده شده است. مثلا برای قطعه کد فوق، بایستی خانواده فونت تگ ها به صورت زیر تعیین شود:

font-family: 'Cherry Swash', cursive;