چگونه فونت های سفارشی را به وب سایت وردپرس خود اضافه کنید

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

فونت های خود میزبان و Typekit خود را اضافه کنید و از آنها در پروژه های Elementor خود برای ایجاد یک زبان برند منحصر به فرد استفاده کنید.

 

آیا از فونت‌های Sans Serif مانند Arial، Helvetica و دیگران خسته شده‌اید؟ آیا از تمام فونت های پیش فرضی که دریافت می کنید خسته شده اید؟ مطمئناً می خواهید از بین جمعیت متمایز شوید. پس چرا یک فونت متفاوت را امتحان نکنید – یک فونت سفارشی. 

در حالی که Elementor با بیش از 800 فونت مختلف Google برای انتخاب از پیش ساخته شده است، گاهی اوقات فونت های پیش فرض و آسان گوگل به سادگی کافی نیستند.

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

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

اضافه کردن فونت های سفارشی به وردپرس به صورت دستی

روشی برای اضافه کردن فونت های سفارشی به وردپرس به صورت دستی وجود دارد، اما این روش نیاز به دانش فنی دارد و ممکن است برای برخی از کاربران دشوار باشد. 

این روش شامل کار با پوشه های وردپرس است. 

1. یک پوشه جدید “fonts” را از طریق یک سرویس گیرنده FTP به پوشه تم خود اضافه کنید. پوشه جدید باید در زیر wp-content/themes/fonts  قرار گیرد

2. یک بار، پوشه جدید “fonts” را اضافه کردید، همه فایل های فونت را به آن اضافه کنید.

3. اکنون، شیوه نامه تم (style.css) را باز کنید و کد زیر را به آن اضافه کنید:

@font-face {
	font-family: 'nameofnewfont';
	src: url("/fonts/nameofnewfont.woff2") format("woff2"),
		 url("/fonts/nameofnewfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

 

4. عناصری را که از این فونت استفاده می کنند با افزودن آنها به همان stylesheet پیکربندی کنید. 

این روش می تواند برای مبتدیان دردسرساز باشد. هر زمان که بخواهید پیکربندی هایی مانند “مورب” یا “پررنگ” را اضافه کنید، باید همان فرآیند را طی کرده و آن پارامترها را اضافه کنید. کدنویسی زیادی وجود دارد.

 

نحوه اضافه کردن فونت های سفارشی به وردپرس با استفاده از Elementor

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

• فرمت فونت باز وب (WOFF) – WOFF توصیه شده ترین فرمت برای استفاده است زیرا توسط همه مرورگرهای مدرن پشتیبانی می شود.
• فرمت فونت باز وب (WOFF 2.0) – فونت TrueType (TTF) / OpenType (OTF) که فشرده سازی بهتری نسبت به WOFF 1.0 ارائه می کند.
• فونت TrueType (TTF) – این فونت در اواخر دهه 1980 توسط اپل و مایکروسافت توسعه یافت. 
• فونت‌ها/اشکال SVG – فونت‌های SVG به SVG اجازه می‌دهند تا در هنگام نمایش متن به‌عنوان حروف الفبا استفاده شود. حتما از این فرمت برای پشتیبانی از نسخه های قدیمی آیفون استفاده کنید
• فونت های OpenType تعبیه شده (EOT) – این فایل فونت روی اینترنت اکسپلورر کار می کند، اما در مرورگرهای دیگر کار نمی کند. مطمئن شوید که از این قالب برای پشتیبانی از نسخه های قبلی IE استفاده می کنید

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

1. به داشبورد وردپرس > Elementor > فونت های سفارشی بروید و روی «افزودن جدید» کلیک کنید.

2. اکنون، با اضافه کردن نام فونت و آپلود فایل WOFF ، WOFF2 ، TTF ، SVG یا EOT ، هر قلمی را اضافه کنید. توصیه می‌شود تا حد امکان فایل‌های فونت را آپلود کنید تا از حداکثر تعداد مرورگرها پشتیبانی کنید.

3. پس از آپلود، فونت های سفارشی جدید شما در کنترل های تایپوگرافی هر ویجتی که حاوی متن است در دسترس خواهد بود. به Elementor بروید و از فونت های جدید در صفحات خود استفاده کنید. عنوان یا هر ویجت متن دیگری را اضافه کنید و در زیر Style > Typography فونت دلخواه خود را انتخاب کنید.

کجا می توان فونت های سفارشی را پیدا کرد

وب‌سایت‌های زیادی وجود دارند که فونت‌های رایگان و فونت‌های پیشرفته‌تر و منحصربه‌فرد مانند Font Squirrel، DaFont، Fontsly و دیگران را ارائه می‌دهند. اما برخی از خدمات مانند Adobe Typekit نیز وجود دارند که تجربه مناسب تری را ارائه می دهند.

Adobe Typekit اکنون در Elementor موجود است

Adobe Typekit یک سرویس اشتراک فونت است که می توانید آن را با رایانه خود همگام کنید یا در یک وب سایت از آن استفاده کنید. با Typekit می توانید هر یک از هزاران فونت adobe موجود را دانلود کرده و در سایت خود استفاده کنید. 

Adobe 2 فونت Typekit را به صورت رایگان ارائه می دهد، بنابراین می توانید ابتدا آن را امتحان کنید و ببینید که چگونه آن را دوست دارید.

بزرگترین مزیت استفاده از Typekit در پروژه های طراحی وب، ادغام یکپارچه آن است. طراحانی که در حال حاضر از فتوشاپ استفاده می‌کنند، از داخل رابط کاربری خود به هزاران فونت حرفه‌ای دسترسی فوری دارند که همه همگام‌سازی شده‌اند و به راحتی قابل استفاده هستند. آنها نیازی به دانلود فونت یا تنظیمات گیج کننده ندارند.

Typekit یکپارچه با Elementor کار می کند. شما به سادگی کلید Typekit خود را در داشبورد تنظیمات (برگه ادغام) وارد کنید و فوراً تمام فونت های Typekit خود را در تنظیمات مختلف تایپوگرافی در Elementor دریافت کنید. با استفاده از این ادغام، برای استفاده از فونت‌های Typekit خود نیازی به دانلود، نصب یا کدنویسی ندارید.

با استفاده از این ادغام Typekit، حرکت از Photoshop PSD به طراحی کامل وردپرس زنده هرگز ساده‌تر نبوده است.

در قسمت Elementor > Settings > Integrations می توانید ID Kit Typekit خود را اضافه کنید. هنگامی که آن را اضافه کردید، روی ‘Sync Kit’ کلیک کنید. چند دقیقه صبر کنید و باید تمام فونت های Typekit خود را در Elementor ببینید. پس از افزودن فونت های جدید به حساب Typekit خود، فراموش نکنید که به صفحه ادغام ها برگردید و فونت های خود را دوباره همگام سازی کنید.

توجه: ممکن است چند دقیقه طول بکشد تا Adobe شبکه CDN خود را به روز کند و فونت های شما را به Elementor وارد کند، پس لطفاً پس از افزودن کلید خود صبور باشید.

وزن و سبک فونت

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

یک خانواده فونت می‌تواند شامل مجموعه‌ای از وزن‌ها بین 100 تا 900 و همچنین وزن‌های معمولی، پررنگ ، پررنگ‌تر یا سبک‌تر باشد. همچنین می تواند شامل فونت های Normal، Oblique یا Italic باشد. هر گونه تغییر وزن و سبک را می توان به طور جداگانه به گروه خانواده فونت اضافه کرد.

اگر از کدهای CSS استفاده می‌کنید، از دستوراتی مانند font-face یا font-style استفاده می‌کنید تا مطمئن شوید که نتیجه نهایی دقیقاً همانطور که می‌خواهید خواهد بود، با این حال، هنگامی که تغییرات فونت خود را آپلود کردید، می‌توانید برای انتخاب فونت داخل Elementor و تنظیم وزن و سبک آن بر اساس آن و به راحتی.

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

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