یک راه عالی برای افزودن برند و فردگرایی به سایت وردپرسی^(WordPress) خود این است که فونت ها را در قالب خود تغییر دهید.

تایپوگرافی و سایر عناصر باندینگ اولین برداشت خوبی را ایجاد می کند، حال و هوای بازدیدکنندگان سایت شما را ایجاد می کند و هویت برند شما را تثبیت می کند. مطالعات^(Studies) همچنین نشان داده‌اند که فونت‌ها بر توانایی خوانندگان برای یادگیری، یادآوری اطلاعات و حفظ متون تأثیر می‌گذارند.

اگر به تازگی یک تم وردپرس نصب^{(installed a WordPress theme)} کرده اید یا تجربه CSS و کدنویسی دارید، چندین گزینه را به شما نشان خواهیم داد که می توانید از آنها برای تغییر فونت در وردپرس^(WordPress) استفاده کنید.

نحوه تغییر فونت در وردپرس^{(How to Change Fonts in WordPress)}

سه گزینه اصلی برای تغییر فونت در وردپرس وجود دارد:

• از فونت های وب مانند فونت های Google^{(Google Fonts)} ، Fonts.com یا Adobe Edge Web Fonts استفاده^{( Adobe Edge Web Fonts)} کنید که در یک سایت شخص ثالث میزبانی می شوند.
• ^(Code)فونت های وب را در قالب خود کد کنید و آنها را در صف قرار دهید
• ^(Host)فونت ها را در سایت خود میزبانی کنید و آنها را به موضوع خود اضافه کنید

1. نحوه تغییر فونت در وردپرس با استفاده از فونت های وب^{(1. How to Change Fonts in WordPress Using Web Fonts)}

استفاده از فونت های وب راهی آسان تر و سریع تر برای تغییر فونت در وردپرس^(WordPress) نسبت به دانلود و آپلود فایل های فونت است.

با استفاده از این گزینه، می توانید به انواع فونت ها^{(access a variety of fonts)} بدون به روز رسانی در هر بار تغییر دسترسی داشته باشید و فضای سرور هاست شما را اشغال نمی کند. فونت ها مستقیماً از سرورهای ارائه دهنده با استفاده از یک افزونه یا با افزودن کد به سایت شما ارائه می شوند.

مطمئن^(Make) شوید که فونت‌های وب که برای سایت خود انتخاب می‌کنید با هویت برند شما مطابقت داشته باشد، به راحتی برای متن اصلی خوانده شود، برای بازدیدکنندگان وب‌سایت آشنا باشد، و نوع خلق و خوی و تصویری را که می‌خواهید منتقل کند.

می توانید فونت های وب را با استفاده از افزونه وردپرس^{(using a WordPress plugin)} یا به صورت دستی با افزودن چند خط کد به سایت خود اضافه کنید. بیایید هر دو گزینه را بررسی کنیم.

نحوه اضافه کردن فونت وب با استفاده از افزونه وردپرس^{(How to Add Web Fonts Using a WordPress Plugin)}

بسته به فونت وب که انتخاب کرده اید، می توانید از یک افزونه وردپرس^(WordPress) برای دسترسی به کتابخانه فونت ها استفاده کنید و فونت مورد نظر خود را در سایت خود انتخاب کنید. برای این راهنما، فونت های گوگل را انتخاب کردیم و^{(Google Fonts)} از افزونه گوگل فونت تایپوگرافی^{(Google Fonts Typography)} استفاده کردیم .

1. برای شروع، وارد داشبورد مدیریت وردپرس خود شوید و ^(WordPress)Plugins > Add New را انتخاب کنید .

1. Google Fonts Typography را در کادر جستجو تایپ کنید و Install Now را انتخاب کنید .

1. فعالسازی^(Activate) را انتخاب کنید .

1. سپس با رفتن به Appearance > CustomizeCustomizer دسترسی پیدا کنید .

1. قسمت Google Fonts را انتخاب کنید .

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

• در زیر تنظیمات اولیه^{(Basic Settings)} ، فونت پیش‌فرض را برای متن متن، سرفصل‌ها و دکمه‌های خود تنظیم کنید.

• در قسمت تنظیمات پیشرفته^{(Advanced Settings)} ، عنوان و توضیحات، منو، سرفصل ها و محتوا، نوار کناری و پاورقی سایت خود را پیکربندی کنید.

• علامت^(Uncheck) هر گونه وزن فونت ناخواسته را در بخش بارگیری فونت^{(Font Loading)} بردارید تا از کند شدن سایت خود جلوگیری کنید^{(avoid slowing down your site)} .

اگر فونت هایی در سایت شما وجود دارد که نمایش داده نمی شوند یا به درستی کار نمی کنند، از بخش Debugging برای عیب یابی استفاده کنید.

1. می‌توانید این تنظیمات را در Customizer آزمایش کنید تا مطمئن شوید که همانطور که می‌خواهید کار می‌کنند و سپس انتشار^(Publish) را انتخاب کنید .

توجه^(Note) : اگر فراموش کنید انتشار در Customizer را انتخاب کنید ، همه تغییراتی که ایجاد کرده اید را از دست خواهید داد.

نحوه اضافه کردن فونت وب با استفاده از کد^{(How to Add Web Fonts Using Code)}

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

با این حال، اگر از یک تم از دایرکتوری قالب وردپرس^(WordPress) یا یک تم سفارشی شده استفاده می کنید، مراحل مختلفی وجود دارد که باید انجام دهید.

اگر یک تم از دایرکتوری قالب وردپرس خریداری کرده اید، یک تم ^(WordPress)فرزند ایجاد کنید^{(create a child theme)} و سپس فایل style.css و functions.php را به آن بدهید. اگر یک طرح زمینه سفارشی داشته باشید آسان تر است زیرا می توانید صفحه سبک و فایل توابع را از طرح زمینه خود ویرایش کنید.

1. برای شروع، یک فونت را از کتابخانه فونت Google انتخاب کنید و نماد ^{(Google Fonts)}+ (plus) را انتخاب کنید تا آن را به کتابخانه خود اضافه کنید.

1. در مرحله بعد، برگه پایین را انتخاب کنید که در آن کدی را برای افزودن به سایت خود پیدا خواهید کرد. به قسمت Embed font در زیر تب Embed بروید. کد تولید شده توسط فونت های گوگل^{(Google Fonts)} را خواهید یافت که چیزی شبیه به این است:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

توجه^(Note) : ما Work Sans را برای این راهنما انتخاب کردیم، بنابراین نام فونت ممکن است بسته به آنچه انتخاب کرده‌اید متفاوت باشد.

1. این قسمت از کد را کپی کنید: https://fonts.googleapis.com/css2?family=Work+Sans

این به شما این امکان را می دهد که استایل را از سرورهای فونت های گوگل^{(Google Fonts)} در صف قرار دهید تا از تضاد با افزونه های شخص ثالث جلوگیری کنید. همچنین امکان تغییرات آسان‌تر تم کودک را فراهم می‌کند.

1. برای قرار دادن فونت در صف، فایل توابع را باز کرده و کد زیر را اضافه کنید. ( لینک را با پیوندی که از فونت های گوگل دریافت می کنید ^{(Google Fonts)}جایگزین کنید^(Replace) ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. اگر می‌خواهید در آینده فونت‌های بیشتری اضافه کنید، می‌توانید یک خط جدید به تابع خود یا به همان خط اضافه کنید:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

در این مورد، هر دو فونت Cambria و Work Sans را در نوبت قرار داده ایم .

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

1. برای انجام این کار، فایل style.css تم خود را باز کنید و کد را برای استایل دادن به عناصر جداگانه با فونت های وب خود به صورت زیر اضافه کنید:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

در این مورد، فونت اصلی Work Sans خواهد بود در حالی که عناصر هدر مانند h1، h2 و h3 از Cambria استفاده می کنند .

پس از اتمام، شیوه نامه را ذخیره کنید و بررسی کنید که آیا فونت های شما همانطور که باید کار می کنند یا خیر. اگر اینطور نیست، بررسی کنید که فونت‌ها در شیوه نامه بازنویسی نشده باشند، یا حافظه پنهان مرورگر خود را پاک کنید و دوباره امتحان کنید.

1. یک فونت پشتیبان در محل خود داشته باشید تا مطمئن شوید که فونت‌ها می‌توانند به‌راحتی رندر شوند یا به آن‌ها دسترسی داشته باشند، مخصوصاً برای کاربرانی که دستگاه‌های قدیمی، اتصالات ضعیف دارند، یا اگر ارائه‌دهنده فونت مشکلات فنی دارد. برای انجام این کار، به stylesheet بروید و CSS را به صورت زیر ویرایش کنید:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

اگر همه چیز خوب باشد، بازدیدکنندگان سایت شما فونت های وب پیش فرض شما را می بینند، در مورد ما Work Sans و Cambria . اگر مشکلی وجود داشته باشد، آنها فونت های پشتیبان را می بینند، به عنوان مثال Arial یا Times New Roman در مورد ما.

2. نحوه تغییر فونت در وردپرس با میزبانی فونت^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

میزبانی فونت ها بر روی سرورهای خود به شما کمک می کند تا عملکرد فونت های وب خود را بهینه کنید، اما همچنین به جای استفاده از منابع از سایت های شخص ثالث، روشی امن تر برای انجام آن است.^{(a more secure way)}

فونت‌های Google^(Google) و سایر فونت‌های وب به شما امکان می‌دهند فونت‌هایی را برای استفاده به‌عنوان فونت‌های میزبانی محلی دانلود کنید، اما همچنان می‌توانید فونت‌های دیگر را در رایانه خود بارگیری کنید، مشروط بر اینکه مجوزها به شما اجازه این کار را می‌دهند.

1. برای شروع، فایل فونت را دانلود کنید، از حالت فشرده خارج کنید، آن را در سایت خود آپلود کنید و سپس آن را در شیوه نامه خود پیوند دهید. در این مورد شما مجبور نیستید فونت ها را در فایل functions.php مانند فونت های وب قرار دهید. قبل از استفاده از آنها در وب سایت خود ، تأیید کنید که فایل هایی که آپلود می کنید در قالب woff . هستند.^(.woff)

1. بعد، به wp-content/themes/themename تا فایل فونت را در قالب خود آپلود کنید. 
2. شیوه نامه را باز کنید و کد زیر را اضافه کنید (در این مورد ما از فونت Work Sans استفاده می کنیم اما می توانید آن را با فونت های خود جایگزین کنید):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
سبک فونت: عادی. ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
سبک فونت: عادی. ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
سبک فونت: عادی. ^{( font-style: normal;)}
}

توجه^(Note) : استفاده از fontface@ به شما امکان می‌دهد از حروف برجسته، کج و سایر تغییرات فونت خود استفاده کنید، پس از آن می‌توانید وزن یا سبک هر فونت را مشخص کنید.

1. در مرحله بعد، یک ظاهر طراحی برای عناصر خود به صورت زیر اضافه کنید:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

تایپوگرافی وردپرس خود را سفارشی کنید^{(Customize Your WordPress Typography)}

تغییر فونت در وردپرس^(WordPress) یک ایده عالی برای بهبود برندینگ و تجربه کاربری است. این کار ساده ای نیست، اما شما کنترل بیشتری روی موضوع خود خواهید داشت.

آیا^(Were) با استفاده از نکات این راهنما توانستید فونت های سایت خود را سفارشی کنید؟ در نظرات به ما بگویید .^(Tell)

How to Change Fonts in WordPress

A great wаy tо add some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• چگونه WordPress site را از یک میزبان به دیگری حرکت دهیم

• نحوه نصب و راه اندازی WordPress در Microsoft Azure

• چگونه برای اجرای پرسرعتی WordPress در Microsoft Azure

• چگونه برای پیکربندی Privacy در WordPress و چرا این مهم است

• چگونه به نصب WordPress در Google Cloud Platform

• AMP برای وردپرس چیست و چگونه آن را نصب کنیم

• وردپرس نشان می دهد HTTP Error هنگام آپلود تصاویر

• بررسی کتاب: وب سایت خود را بسازید: راهنمای کمیک برای HTML، CSS و وردپرس

• نحوه افزایش سرعت سایت وردپرس در ۱۱ مرحله

• چگونه یک وبلاگ Wix بسازیم که به خوبی وردپرس باشد

• نحوه اضافه کردن نوار کناری شناور در Wordpress

• نحوه انجام تست های تقسیم موثر در وردپرس

• 7 نکته وردپرس برای یک وب سایت سازگار با موبایل

• ایجاد Child Theme در WordPress

• چگونه می توان عملکرد وردپرس را از طریق پاکسازی پایگاه داده افزایش داد

• 11 بهترین افزونه پادکست وردپرس

• Squarespace در مقابل وردپرس: کدام پلتفرم سایت بهتر است؟

• نحوه به روز رسانی PHP در وردپرس

• چگونه برای بررسی اگر یک وب سایت از AdSense ممنوع

• نحوه انتقال از ویرایشگر کلاسیک وردپرس به گوتنبرگ