اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

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

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

اکنون دو سوال مطرح می‌شود:

1- از کجا می‌توان فونت‌های خاص را برای وردپرس دریافت نمود؟

2- چگونه فونت‌های دلخواه را در وردپرس خود نصب کنید؟

تصویر(1)

چرا باید از فونت‌های خاص استفاده شود؟

در گذشته کاربران صرفا می‌توانستند از فونت‌های Times New Roman و Georgia استفاده کنند. در طول چند سال گذشته، با ظهور سرویس‌هایی مانند Google Fonts و سایر فونت‌ها، فضای حاکم بر فونت‌ها تغییر کرده است.

امروزه صدها فونت رایگان، اطلاعات و منابع کمک آموزشی برای طراحی سایت، در اینترنت موجود می‌باشد. برخلاف Adobe Illustrator، Photoshop و سایر برنامه‌های کلاسیک، وردپرس به طور پیشفرض ابزار کاملی برای کنترل فونت‌ها در اختیار کاربر قرار نمی‌دهد. صرفا برخی قالب‌ها از فونت‌های خاص استفاده می‌کنند. در این مقاله با نحوه یافتن فونت‌های سفارشی مناسب و اضافه کردن فونت‌های سفارشی در وردپرس، آشنا خواهید شد.

اهمیت استفاده از فونت‌های سفارشی

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

به طور کلی طراحی فونت حتی اگر کاربر متوجه آن نشود، باز هم بر خواننده تاثیر می‌گذارد. رها کردن طراحی فونت به معنی کنار گذاشتن توسعه سایت می‌باشد. حس کاربر به فونت متن بستگی دارد. زیرا فونت می‌تواند خواندن را آسان تر یا کاربر را مجبور به ترک صفحه کند. تمامی مرورگرها شامل مجموعه‌ای از فونت‌های پیشفرض هستند. به این معنی که اگر فونت در CSS صفحه مشخص نشده باشد، از نسخه استاندارد استفاده می‌شود.

همیشه می‌توانید از فونت‌های پیش فرض استفاده کنید اما این فونت‌ها کاربران را کلافه می‌کنند. به همین دلیل اضافه کردن فونت‌های سفارشی در وردپرس بسیار ضروری است. چنانچه قالب شما گزینه ای برای تغییر فونت ندارد، می‌توانید در این خصوص از وب سایت‌ها و ابزارهای مختلفی کمک بگیرید.

جایگزین‌ فونت‌های گوگل

تصویر(2)

بسیاری از مدیران، فونت‌های رایگان گوگل را می‌شناسند. سایت‌های زیادی وجود دارند که می‌توانید فونت‌های بسیار زیبا را در آنها پیدا کنید. برخی از آنها برای استفاده شخصی، رایگان هستند. چنانچه برای استفاده تجاری به این فونت‌ها نیاز دارید، باید لایسنس آنها را تهیه کنید.

فونت‌های رایگان گوگل و Adobe Edge، چندان منحصر به فرد نیستند و اغلب، مدیران وب سایت‌ها از آنها استفاده نمی کنند.

در ادامه چند منبع برای یافتن فونت‌های رایگان و تجاری، ذکر شده است:

1. TemplateMonster: در این سایت تمام ابزارهای مورد نیاز برای طراحی یک وب سایت، موجود است. همچنین فونت های زیادی برای استفاده‌ شخصی وجود دارد.
2. MyFonts: در حال حاضر بزرگترین فروشگاه فونت در جهان می‌باشد. با این حال، قیمت‌های آن بسیار بالا است.
3. Fontspring: این سایت فونت‌های فانتزی را برای استفاده تجاری می‌فروشد. با این حال، تقریبا در هر دسته بندی 1 الی 2 فونت رایگان وجود دارد که می‌تواند برای اهداف شخصی استفاده شود.
4. Cufonfonts: شامل مجموعه گسترده‎ای از فونت‌های مختلف است. همچنین دارای تعداد زیادی فونت رایگان می‌باشد که به بخش‌های جداگانه ای تقسیم می‌شوند.
5. Dafont: مجموعه ای از 3500 فونت رایگان می‌باشد که اکثر آنها فقط برای استفاده شخصی طراحی شده اند و در دسته‌های مختلف قابل مشاهده هستند. 

پس از انتخاب فونت، مراحل زیر را برای افزودن آن به وردپرس، دنبال نمایید.

نحوه اضافه کردن فونت‌های سفارشی در وردپرس

چند راه برای اضافه کردن فونت‌های سفارشی در وردپرس وجود دارد:

افزونه‌ها: در این حالت از افزونه‌های مختلف وردپرس برای تسهیل فرآیند استفاده می‌شود.

به صورت دستی: در این روش نیاز به آپلود فونت دریافتی در سایت و ویرایش فایل CSS می‌باشد.

قالب‌ها: بسیاری از قالب‌ها دارای ابزارهایی برای سفارشی کردن فونت‌ها می‌باشند. این مورد در ادامه بررسی نخواهد شد زیرا روند آن بر اساس قالبی که استفاده می‌کنید، متفاوت است.

گزینه 1: تغییر فونت‌های وردپرس با استفاده از افزونه ها

چنانچه با ایجاد تغییرات کلی در سایت مشکلی ندارید، می‌توانید از افزونه‌ها برای تغییر فونت سایت خود استفاده نمایید.

ویژگی‌ افزونه‌های فونت سفارشی

با استفاده از چندین افزونه می‌توانید فرآیند اضافه کردن فونت‌های سفارشی در وردپرس را انجام دهید، اما چگونه باید یک افزونه مناسب را انتخاب کنید؟ ویژگی‌های افزونه‌های فونت سفارشی چیست؟

در ادامه چند نکته که باید مدنظر داشته باشید، ذکر شده است:

• امکان استفاده از فونت دلخواه
• امکان استفاده بیش از یک فونت
• استفاده در هدر‌ها و کامپوننت‌های موردنظر
• مزیت: امکان تغییر تنظیمات فونت با استفاده از ویرایشگر بصری

در نظر داشته باشید که اولین ویژگی در لیست بالا، بسیار مهم است. همیشه می‌توانید فونت‌ها را از سایت هایی مانند DaFont، Font Squirrel و غیره دانلود کنید اما باید بتوانید آنها را در وردپرس آپلود نمایید. افزونه‌های وجود دارند که آپلود و اضافه کردن فونت‌های سفارشی در وردپرس را امکان پذیر می‌کنند که در ادامه به چند مورد از آن‌ها اشاره می‌شود.

افزونه Use Any Font

این افزونه رابط کاربری مناسبی برای دانلود فونت‌ها و استفاده مستقیم از طریق ویرایشگر بصری، در اختیار کاربر قرار می‌دهد.

ویرایشگر بصری وردپرس می‌تواند به طور خودکار فونت هر متنی را تغییر دهد. این افزونه نیز چندین ابزار را ارائه می‌کند که باعث می‌شود روند افزودن فونت‌های سفارشی و مدیریت آنها آسان تر شود.

تصویر(3)

افزونه WP Google Fonts

این افزونه اجازه می‌دهد تا از گوگل فونت، در وردپرس خود استفاده نمایید. یکی از مزایای شگفت انگیز این افزونه، اضافه شدن حدود 1000 فونت به وب سایت تان می‌باشد.

نحوه نصب فونت‌ها با استفاده از افزونه

به عنوان مثال، برای نصب فونت توسط افزونه "WP Google Fonts" کافی است افزونه را از مخزن وردپرس نصب و به منوی "Google Fonts" در پیشخوان وردپرس خود مراجعه نمایید.

تصویر(4)

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

گزینه 2 : نصب فونت‌های سفارشی وردپرس به صورت دستی

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

مزایا:

• از طریق CSS، می‌توانید هر فرمتی از فونت‌ها مانند ttf، otf، woff، svg. را به وردپرس متصل نمایید.
• فایل‌های فونت در هاست شما ذخیره خواهند شد و نیازی به اتصال به سرور دیگری برای دریافت فونت‌ها نمی باشد.

معایب:

• برای اتصال صحیح فونت در هر استایل، باید یک کد جداگانه اضافه کنید.
• بدون دانش CSS، با مشکل روبرو خواهید شد.

توجه: قبل از شروع، حتما یک چایلد تم برای سایت خود ایجاد نمایید تا بتوانید تمام ویرایش‌ها را در چایلد تم انجام دهید. این کار موجب می شود تا در زمان اعمال تغییرات، نگرانی بابت ایجاد مشکل وجود نداشته باشد.

مرحله 1: ایجاد پوشه "fonts"

در مسیر چایلد تم خود یک پوشه جدید به نام "fonts" ایجاد نمایید:

wp-content/themes/example-child-theme/fonts

مرحله 2: آپلود فونت‌های دانلود شده در وب سایت

برای آپلود و اضافه کردن فونت‌های سفارشی در وردپرس می‌توانید از طریق کنترل پنل هاست یا از طریق FTP اقدام نمایید.

همه فونت‌ها را در پوشه جدیدی که برای فونت‌های خود ایجاد نمودید، آپلود کنید:

wp-content/themes/your-child-theme/fonts

مرحله 3. اضافه کردن فونت‌ها از طریق صفحه چایلد تم

فایل style.css چایلد تم خود را باز و کد زیر را به ابتدای فایل اضافه کنید:

@font-face{

font-family: 'ExampleFont';

src: url('fonts/ExampleFont.eot');

src: url('fonts/ExampleFont.eot?#iefix') format('embedded-opentype'),

url('fonts/ExampleFont.woff') format('woff'),

url('fonts/ExampleFont.ttf') format('truetype'),

url('fonts/ExampleFont.svg#svgExample') format('svg');

font-weight: normal;

font-style: normal;

}

ExampleFont در واقع نام فونت‌ها و ویژگی src محل ذخیره فونت‌ها را نمایش می‌دهد. در نظر داشته باشید که باید هر فونت را به صورت جداگانه تعریف کنید. ابتدا برای تنظیم استایل normal، ویژگی‌های "font-weight" و "font-style" را روی حالت normal قرار دهید.

مرحله 4. نحوه افزودن حروف Italic

برای نمایش حروف به شکل Italic، همانند قطعه کد زیر ویژگی "font-style" را برابر با "italic" وارد کنید.

@font-face{

font-family: 'ExampleFont';

src: url('fonts/Example-Italic.eot');

src: url('fonts/Example-Italic.eot?#iefix') format('embedded-opentype'),

url('fonts/Example-Italic.woff') format('woff'),

url('fonts/Example-Italic.ttf') format('truetype'),

url('fonts/Example-Italic.svg#svgExample') format('svg');

font-weight: normal;

font-style: italic;

}

مرحله 5: نحوه پررنگ کردن فونت

برای نمایش حروف به شکل پررنگ، همانند قطعه کد زیر ویژگی "font-weight" را برابر با "bold" وارد کنید.

@font-face{

font-family: 'ExampleFont';

src: url('fonts/Example-Bold.eot');

src: url('fonts/Example-Bold.eot?#iefix') format('embedded-opentype'),

url('fonts/Example-Bold.woff') format('woff'),

url('fonts/Example-Bold.ttf') format('truetype'),

url('fonts/Example-Bold.svg#svgExample') format('svg');

font-weight: bold;

font-style: normal;

}

به یاد داشته باشید که مسیر صحیح فایل‌های فونت را برای هر استایل مشخص نمایید.

مرحله 6: نحوه پررنگ و Italic کردن فونت‌ها

جهت این مورد نیاز است ویژگی "font-weight" را برابر با "bold" و ویژگی  "font-style" را نیز برابر با "italic" وارد نمایید.

@font-face{

font-family: 'ExampleFont';

src: url('fonts/Example-Italic-Bold.eot');

src: url('fonts/Example-Italic-Bold.eot?#iefix') format('embedded-opentype'),

url('fonts/Example-Italic-Bold.woff') format('woff'),

url('fonts/Example-Italic-Bold.ttf') format('truetype'),

url('fonts/Example-Italic-Bold.svg#svgExample') format('svg');

font-weight: bold;

font-style: italic;

}

اکنون با اضافه کردن کد‌های بالای به چایلد تم خود، فونت‌ها را به سایت خود متصل نموده اید.

نتیجه گیری

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