آیا می خواهید قلم های سفارشی را در وردپرس اضافه کنید؟ فونت های سفارشی به شما امکان می دهد از ترکیب زیبایی از فونت های مختلف در وب سایت خود برای بهبود تایپوگرافی و تجربه کاربری استفاده کنید.
علاوه بر ظاهر زیبا ، فونت های سفارشی همچنین می توانند به شما در بهبود قابلیت خوانایی ، ایجاد تصویر نام تجاری و افزایش زمان کاربران در وب سایت شما کمک کنند.
در این مقاله ، ما به شما نحوه افزودن فونتهای سفارشی در وردپرس با استفاده از Google Fonts ، TypeKit و CSS3 @ Font-Face را نشان خواهیم داد.
توجه: بارگیری بیش از حد فونت می تواند سرعت وب سایت شما را کم کند. ما توصیه می کنیم دو قلم را انتخاب کنید و از آنها در وب سایت خود استفاده کنید. ما همچنین به شما نشان خواهیم داد که چگونه آنها را بدون کند کردن سرعت وب سایت خود بارگیری کنید.
قبل از اینکه به نحوه افزودن فونت های سفارشی در وردپرس بپردازیم ، بیایید نگاهی به پیدا کردن فونت های سفارشی بیندازیم.
نحوه پیدا کردن قلم های سفارشی برای استفاده در وردپرس h4>
قلمها گران بودند ، اما نه بیشتر. مکان های بسیاری برای یافتن فونت های وب رایگان رایگان وجود دارد مانند Google Fonts ، Typekit ، FontSquirrel ، و fonts.com .
اگر نمی دانید چگونه قلم ها را با هم ترکیب و مطابقت دهید ، را امتحان کنید جفت قلم . این به طراحان کمک می کند تا فونت های زیبای Google را با هم جفت و جور کنند.
همانطور که قلم های خود را انتخاب می کنید ، به یاد داشته باشید که استفاده از فونت های سفارشی زیاد باعث کند شدن وب سایت شما می شود. به همین دلیل شما باید دو قلم را انتخاب کنید و از آنها در طول طراحی خود استفاده کنید. این همچنین باعث ایجاد ثبات در طراحی شما می شود.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا راهنمای نوشتاری را ترجیح می دهید ، لطفاً به خواندن ادامه دهید.
افزودن قلمهای سفارشی در وردپرس از Google Fonts
Google Fonts بزرگترین ، رایگان و متداولترین کتابخانه فونت در بین توسعه دهندگان وب سایت است. چندین روش وجود دارد که می توانید Google Fonts را در وردپرس اضافه و استفاده کنید.
روش 1: افزودن قلم های سفارشی با استفاده از پلاگین Google Fonts آسان h4>
اگر می خواهید Google Fonts را در وب سایت خود اضافه کنید و از آن استفاده کنید ، پس این روش بسیار ساده ترین و توصیه شده برای مبتدیان است.
اولین کاری که باید انجام دهید این است که قلم های آسان Google . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال شدن ، می توانید به صفحه Appearance »Customizer بروید. با این کار رابط کاربری سفارشی سازی تم مستقیم در جایی که قسمت جدید تایپوگرافی را مشاهده می کنید باز می شود
با کلیک بر روی تایپوگرافی ، بخشهای مختلف وب سایت خود را نشان می دهید که در آن می توانید Google Fonts را اعمال کنید. به سادگی بر روی “ویرایش قلم” در زیر بخشی که می خواهید ویرایش کنید کلیک کنید.
در بخش خانواده قلم ، می توانید هر قلم Google را که می خواهید در وب سایت خود استفاده کنید ، انتخاب کنید. همچنین می توانید سبک قلم ، اندازه قلم ، پر کردن ، حاشیه و موارد دیگر را انتخاب کنید.
بسته به موضوع شما ، تعداد بخشها در اینجا ممکن است محدود باشد و ممکن است نتوانید مستقیماً انتخاب قلم را برای بسیاری از مناطق مختلف وب سایت خود تغییر دهید.
برای رفع این مشکل ، این افزونه به شما امکان می دهد کنترل های شخصی خود را ایجاد کرده و از آنها برای تغییر قلم ها در وب سایت خود استفاده کنید.
ابتدا باید به صفحه تنظیمات »قلم های Google مراجعه کرده و نامی برای کنترل قلم خود ارائه دهید. از چیزی استفاده کنید که به شما کمک می کند به سرعت بفهمید از این کنترل قلم کجا استفاده می کنید.
بعد ، بر روی دکمه “ایجاد کنترل قلم” کلیک کنید و سپس از شما خواسته می شود انتخابگرهای CSS را وارد کنید.
شما می توانید عناصر HTML را که می خواهید هدف قرار دهید (به عنوان مثال h1 ، h2 ، p ، blockquote) اضافه کنید یا از کلاس های CSS استفاده کنید.
می توانید از ابزار را در مرورگر خود بازرسی کنید تا بفهمید کدام کلاسهای CSS توسط منطقه خاصی که می خواهید تغییر دهید استفاده می شود.
اکنون برای ذخیره تنظیمات خود بر روی دکمه “ذخیره کنترل قلم” کلیک کنید. می توانید به اندازه مورد نیاز برای بخشهای مختلف وب سایت خود ، کنترل کننده های قلم ایجاد کنید.
برای استفاده از این کنترل کننده های قلم ، باید به Appearance »Customizer مراجعه کرده و روی برگه Typography کلیک کنید.
در بخش تایپوگرافی ، اکنون گزینه ‘Theme Typography’ را نیز مشاهده خواهید کرد. با کلیک بر روی آن کنترل های قلم سفارشی شما که قبلاً ایجاد کرده اید نشان داده می شود. اکنون می توانید بر روی دکمه ویرایش کلیک کنید تا قلم ها و شکل ظاهری این کنترل را انتخاب کنید.
برای ذخیره تغییرات فراموش نکنید که روی دکمه ذخیره یا انتشار کلیک کنید.
روش 2: به صورت دستی قلم های Google را در وردپرس اضافه کنید h4>
این روش شما را ملزم می کند کدی را به پرونده های قالب WordPress خود اضافه کنید. اگر قبلاً این کار را انجام نداده اید ، راهنمای ما را در مورد نحوه کپی و جایگذاری کد در وردپرس .
ابتدا از کتابخانه قلم های Google بازدید کنید و قلم مورد نظر برای استفاده را انتخاب کنید. بعد ، روی دکمه استفاده سریع در زیر قلم کلیک کنید.
در صفحه قلم ، سبک های موجود برای آن قلم را مشاهده خواهید کرد. سبک هایی را که می خواهید در پروژه خود استفاده کنید انتخاب کنید و سپس بر روی دکمه نوار کناری در بالا کلیک کنید.
بعد ، برای کپی کردن کد تعبیه شده ، باید به برگه “جاسازی” در نوار کناری بروید.
به دو روش می توانید این کد را به سایت وردپرس خود اضافه کنید.
ابتدا می توانید پرونده header.php طرح زمینه خود را ویرایش کرده و کد را قبل از برچسب پیست کنید.
اما اگر با ویرایش کد در وردپرس آشنایی ندارید ، می توانید از یک افزونه برای افزودن این کد استفاده کنید.
نگران نباشید درج سرصفحه ها و پاورقی ها . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال شدن ، به صفحه تنظیمات »درج سرصفحه ها و پاورقی ها بروید و کد تعبیه شده را در کادر” اسکریپت ها در هدر “جایگذاری کنید.
برای ذخیره تغییرات فراموش نکنید که روی دکمه ذخیره کلیک کنید. اکنون این افزونه بارگیری کد جاسازی Google Font را در تمام صفحات وب سایت شما آغاز می کند.
می توانید از این قلم در صفحه سبک طرح زمینه خود مانند این استفاده کنید:
.h1 سایت-عنوان {
font-family: 'Open Sans'، Arial، sans-serif؛
}
برای دستورالعمل های دقیق تر ، به راهنمای ما در مورد نحوه افزودن قلم های Google در قالب های WordPress .
افزودن قلم های سفارشی در وردپرس با استفاده از Typekit
Typekit توسط Adobe Fonts یکی دیگر از موارد رایگان است و منبع برتر برای قلم های عالی که می توانید در پروژه های طراحی خود استفاده کنید. آنها اشتراکی پولی و همچنین برنامه رایگان محدودی دارند که می توانید از آنها استفاده کنید.
به سادگی برای یک حساب Adobe Fonts ثبت نام کنید و از بخش مرور قلم ها بازدید کنید. برای انتخاب فونت و ایجاد پروژه ، از اینجا باید بر روی دکمه > کلیک کنید.
در مرحله بعدی ، کد تعبیه شده با شناسه پروژه خود را مشاهده خواهید کرد. همچنین به شما نحوه استفاده از قلم در CSS موضوع را نشان می دهد.
شما باید این کد را در بخش
وب سایت خود کپی و جایگذاری کنید.
به دو روش می توانید این کد را به سایت وردپرس خود اضافه کنید.
ابتدا می توانید پرونده header.php طرح زمینه خود را ویرایش کرده و کد را قبل از برچسب پیست کنید.
اما اگر با ویرایش کد در وردپرس آشنایی ندارید ، می توانید از یک افزونه برای افزودن این کد استفاده کنید.
نگران نباشید درج سرصفحه ها و پاورقی ها .
پس از فعال شدن ، به صفحه تنظیمات »درج سرصفحه ها و پاورقی ها بروید و کد تعبیه شده را در جعبه” اسکریپت ها در سرصفحه “جایگذاری کنید.
این همه ، اکنون می توانید از قلم Typekit که در صفحه سبک قالب وردپرس خود انتخاب کرده اید ، مانند این استفاده کنید:
h1 .site-title {
font-family: gilbert، sans-serif؛
}
برای جزئیات بیشتر ، به آموزش ما مراجعه کنید که چگونه اضافه کردن تایپوگرافی عالی در وردپرس با استفاده از Typekit .
افزودن قلم های سفارشی در وردپرس با استفاده از CSS3 @ font-face
مستقیم ترین روش افزودن فونت های سفارشی در وردپرس افزودن قلم ها با استفاده از روش CSS3 @ font-face است. این روش به شما امکان می دهد از هر فونتی که دوست دارید در وب سایت خود استفاده کنید.
اولین کاری که باید انجام دهید این است که فونت مورد نظر خود را در قالب وب بارگیری کنید. اگر قالب وب را برای قلم خود ندارید ، می توانید با استفاده از سازنده FontSquirrel Webfont .
هنگامی که فایل های وب فونت را دریافت کردید ، باید آن را در میزبان وردپرس سرور.
بهترین مکان برای بارگذاری قلم ها ، داخل پوشه جدید “قلم ها” در طرح زمینه شماست یا تم کودک”.
شما می توانید از FTP یا File Manager در خود استفاده کنید cPanel برای بارگذاری قلم.
پس از بارگذاری قلم ، باید قلم را در صفحه سبک موضوع خود با استفاده از قانون CSS3 @ font-face بارگذاری کنید:
@ font-face {
font-family: Arvo؛
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf)؛
فونت-وزن: طبیعی؛
}
فراموش نکنید که خانواده و آدرس فونت را با آدرس خود جایگزین کنید.
بعد از آن می توانید از آن قلم در هرجای صفحه سبک تم خود مانند این استفاده کنید:
.h1 سایت-عنوان {
font-family: "Arvo"، Arial، sans-serif؛
}
بارگذاری مستقیم قلم ها با استفاده از CSS3 @ font-face همیشه بهترین راه حل نیست. اگر از قلم Google Fonts یا Typekit استفاده می کنید ، بهتر است فونت را مستقیماً از سرور آنها برای عملکرد بهینه استفاده کنید.
این همه ، امیدواریم این مقاله به شما کمک کند تا فونت های سفارشی را در وردپرس اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در مورد نحوه از فونتهای آیکون در وردپرس استفاده کنید و نحوه تغییر اندازه قلم در وردپرس .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید. برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/.