تحميل الخطوط المخصصة باستخدام البرنامج المساعد Hash Custom Font Uploader

هل سئمت من استخدام نفس الخطوط القديمة على موقع الويب الخاص بك وتريد أن تجعله يبدو مختلفًا؟ إذا لم تكن خبيرًا في البرمجة، فلا تقلق! لدينا دليل بسيط يوضح لك طريقة سهلة لإضافة خطوطك المفضلة إلى سمات WordPress الخاصة بك. ستأخذك هذه الوثائق خلال عملية تحميل الخطوط المخصصة، خطوة بخطوة، مما يجعل من السهل منح موقع الويب الخاص بك نمطًا فريدًا.

تثبيت البرنامج المساعد

للبدء في تخصيص الخط وتحميله، ستحتاج إلى تثبيت مكون إضافي يسمى Hash Custom Font Uploader .

*ملاحظة: هذا البرنامج المساعد متوافق فقط مع السمات التي كتبها HashThemes*

تثبيت برنامج تحميل الخط المخصص للتجزئة

لتثبيت برنامج تحميل خطوط التجزئة، اتبع الإرشادات:

• انتقل إلى المكونات الإضافية > إضافة مكونات إضافية جديدة > تحميل المكونات الإضافية .
• انقر فوق "تحميل البرنامج المساعد" واختر ملف .zip من جهاز الكمبيوتر الخاص بك.
• بعد أن قمت بتحميل ملف .zip، انقر فوق "التثبيت الآن" .
• ثم قم بتنشيط البرنامج المساعد.
• يمكنك أن ترى أن البرنامج المساعد يظهر على هيئة Hash Custom Font Uploader.

بمجرد تثبيت البرنامج الإضافي، يمكنك بعد ذلك استخدام الخطوط المخصصة لبدء عملية تحميل الخطوط.

دعنا نرشدك خلال العملية خطوة بخطوة.

اختيار الخط

توفر السمات التي تدعمها HashThemes مجموعة واسعة من خطوط Google التي يمكنك الاختيار من بينها. هناك أكثر من 800+ خطوط جوجل.

ومع ذلك، إذا كنت تبحث عن شيء مميز، فيمكنك دائمًا استكشاف العديد من مواقع الخطوط التي تقدم مجموعة أكبر من الخيارات التي صممها العديد من مصممي الخطوط والمتاحة مجانًا أو مدفوعة عبر مواقع ويب مختلفة.

يعد Font Squirrel مثالًا رئيسيًا على هذا الموقع. لا يمنحك هذا النظام الأساسي حرية تنزيل الخطوط دون أي تكلفة فحسب، بل يعمل أيضًا على تبسيط عملية تحويل ملفاتك إلى التنسيقات اللازمة لتحميل الخطوط.

بالإضافة إلى ذلك، تجدر الإشارة إلى أن هناك العديد من الخطوط عالية الجودة المتاحة للشراء، ولا تتطلب سوى رسوم رمزية، وهي جاهزة للاستخدام الفوري.

في هذا البرنامج التعليمي، سنوضح كيفية تبسيط عملية تحميل الخطوط باستخدام Font Squirrel.

نحتاج إلى تنسيقين لملفات الخطوط (WOFF وWOFF2) لاستخدامهما في Hash Custom Font Uploader. إذا كنت تريد معرفة المزيد حول الاختلافات في الخط ولماذا يتم تحويل الملفات إلى تنسيق WOFF وWOFF2، فاقرأ على طول. إذا كنت تريد البدء فورًا بتحميل برنامج تعليمي للخط المخصص، فانقر هنا.

فهم تنسيقات الملفات المختلفة

قبل أن ننتقل إلى البرنامج التعليمي، دعونا نتعرف على بعض تنسيقات الملفات النموذجية التي يمكن أن تأتي بها الخطوط.

خط TrueType (.ttf): تنسيق الخط .ttf هو تنسيق خط يستخدم على نطاق واسع لطباعة سطح المكتب والويب. نوع الملف هذا متوافق مع أنظمة Windows وmacOS.

OpenType Font (.otf): تنسيق Open Type هو امتداد لتنسيق True Type. يتيح هذا التنسيق ميزات مطبعية إضافية وهو متوافق مع كل من Windows وmacOS.

تنسيق خط الويب المفتوح (.woff): تم تصميم هذا النوع من التنسيق خصيصًا لاستخدام الويب. إنه يوفر ضغطًا جيدًا وتوافقًا مع المتصفح.

Web Open Font Format 2 (.woff2): تنسيق الملف هذا هو نسخة محسنة من تنسيق Web Open Font، مما يوفر ضغطًا وأداءً فائقًا لخطوط الويب.

خط PostScript Type 1 (.pfb): نوع تنسيق الخط PostScript هو إصدار أقدم من تنسيق الخط الذي يُستخدم بشكل أساسي في صناعة طباعة PostScript.

خط SVG (.svg): استنادًا إلى خطوط XML، تُستخدم غالبًا خطوط SVG لأيقونات الويب والتصميمات الخاصة.

خط نقطي (.fon): الخطوط الممثلة كشبكة من وحدات البكسل، مناسبة لشاشات العرض ذات الدقة المنخفضة.

هذه بعض تنسيقات الخطوط المستخدمة لأغراض مختلفة. السبب وراء التعرف على هذه التنسيقات هو أن بعض الملفات تحتاج إلى تحويل للحصول على ميزة إضافية.

تنسيقات الملفات الأكثر استخدامًا هي TTF (True Type Font) وOTF (Open Type Font) لطباعة سطح المكتب والويب.

ومع ذلك، اعتبارًا من عام 2021، كانت تنسيقات الخطوط الأكثر استخدامًا لاستخدام الويب هي Web Open Font Format (WOFF) وWOFF2 (Web Open Font Format 2).

*ملاحظة: من المهم معرفة أن شعبية الخطوط قد تتطور بمرور الوقت وأن التقنيات الجديدة قد تحل محل التقنيات القديمة.*

لماذا من الضروري تغيير الملفات إلى تنسيقات ‎.woff و‎.woff2؟

بينما يمكن تحميل ملفات TTF وOTF مباشرة على الويب، فإن تحويلها إلى تنسيق ملفات ‎.woff و.woff2 له العديد من المزايا:

1. الضغط:

السبب الرئيسي لتحويل ملفات TTF وOTF إلى تنسيقات WOFF وWOFF2 هو أنها مضغوطة في الحجم. عندما يكون حجم الملف أصغر، يؤدي ذلك إلى أوقات تحميل أسرع لصفحات الويب. يعد هذا أمرًا بالغ الأهمية لتحسين تجربة المستخدم وتصنيفات تحسين محركات البحث (SEO) أيضًا.

2. تحسين الويب:

تعد تنسيقات WOFF وWOFF2 مناسبة تمامًا للويب ومقبولة على نطاق واسع، بما في ذلك ميزة تعيين الخطوط الفرعية التي تسمح للمستخدمين بتضمين الأحرف والصور الرمزية اللازمة لصفحة ويب معينة فقط، مما يؤدي إلى تقليل حجم الملف بشكل أكبر.

3. توافق المتصفح:

تدعم متصفحات الويب الحديثة تنسيقات WOFF وWOFF2 على نطاق واسع، مما يضمن عرض الخطوط الموثوق به عبر الأنظمة الأساسية والأجهزة المختلفة. قد تحتوي ملفات TTF وOTF على مستويات مختلفة من التوافق والدعم.

4. الترخيص:

تميل العديد من تراخيص الخطوط إلى السماح باستخدام تنسيقات WOFF وWOFF2 على الويب، بينما قد يكون لها المزيد من القيود على ملفات TTF وOTF. من خلال تحويل الخطوط إلى تنسيق WOFF/WOFF2، يمكنك التأكد من التزامك بمتطلبات ترخيص الخطوط.

5. الأداء:

يتم تحسين تنسيقات الخطوط WOFF وWOFF2 بشكل عام. ومن ثم، فإنها تؤدي أداءً أفضل في بيئات الويب، مما يؤدي إلى عرض نص أكثر سلاسة وسرعة.

هذه هي الضروريات الأساسية لتحويل ملفات TTF وOTF إلى ملفات WOFF/WOFF2. بعد ذلك، سنرشدك خلال عملية تحميل الخطوط.

اختيار الخطوط في موقع "FONT SQUIRRE L".

الآن، لنبدأ بعملية اختيار الخط ونستكشف المزيد.

• أدخل "Sinkin Sans" في شريط البحث، وسترى معاينة للخط مع أشكاله المختلفة.
• بعد ذلك، قم بتنزيل ملف OTF لخط Sinkin Sans.

أما بالنسبة لهذا البرنامج التعليمي فقد اخترنا الخط "Sinkin Sans" . يمكنك اختيار واستخدام أي خط تفضله. كما ذكرنا سابقًا، يمكن أن يكون الخط بتنسيقات مختلفة. هنا ملف الخط Sinkin Sans بتنسيق OTF.

• قم باستخراج ملف .zip إلى المجلد المخصص لك.

مولد خطوط الويب

يجب أن تكون الخطوط المستخدمة في Hash Custom Font Uploader بتنسيقات ملفات WOFF وWOFF2. لذا، إذا كان الخط الذي تم تنزيله بتنسيقات ملفات WOFF وWOFF2، فيمكنك تخطي الخطوة أدناه والمتابعة مباشرةً إلى Hash Custom Font Uploader. ولكن إذا لم يكن الخط الذي تم تنزيله بتنسيقات WOFF وWOFF2، فستحتاج إلى استخدام Font Generator/Converter لإنشاء ملفات خطوط WOFF وWOFF2.

• سوف نستخدم تطبيق Webfont Generator عبر الإنترنت لموقع Font Squirrel.
• انقر فوق Webfont Generator كما هو موضح بالرقم 3 في لقطة الشاشة أدناه.

• للحصول على المجموعة الخاصة بك، انقر فوق الزر "تحميل الخطوط" وقم بتحميل ملفات الخطوط التي تم تنزيلها/استخراجها

• في هذه الحالة، نختار "Sinkin Sans Regular".
• بمجرد تحديد اختيارك، ما عليك سوى النقر فوق "فتح".
• تنزيل الطقم .

• قم باستخراج الملف المضغوط الذي تم تنزيله. سترى أن منشئ Webfont قد أنشأ ملفات .WOFF و.WOFF2 الضرورية لمكون Hash Custom Font Uploader الإضافي.

تحميل الخطوط المخصصة على البرنامج المساعد Hash Custom Font Uploader

خط Sinkin Sans جاهز تقريبًا للاستخدام على موقع الويب الخاص بك، وأنت على بعد خطوات قليلة منه. يرجى اتباع التعليمات التالية:

• انتقل إلى برنامج تحميل الخط المخصص للتجزئة
• بعد ذلك، قم بتحميل ملفات الخطوط .woff2 و .woff وفقًا للتعليمات، وتأكد من تحديد سمك الخط على أنه عادي 400 .
• في الخطوة التالية، قم بتسمية الخط الخاص بك لتسهيل العثور عليه عندما تحتاج إليه. في هذه الحالة، نظرًا لأن الخط هو Sinkin Sans، فقد قمنا بتسميته وفقًا لذلك.
• احفظه بالنقر على "حفظ الإعدادات" .
• بمجرد الحفظ، سترى كيف يظهر خط Sinkin Sans في الأسفل. وهذا يدل أيضًا على أن الخط يعمل ويمكنك استخدامه الآن.

تحميل الاختلافات للخطوط المخصصة

يمكن أن يكون للخط أنماط ومظهر مختلف. سنتعلم هنا كيفية إضافة أنماط خطوط مختلفة لنفس الخط.

يحتوي الخط الذي اخترناه أعلاه (Sinkin Sans) على أشكال مختلفة مثل الرفيع والخفيف والعادي والمتوسط ​​وشبه الغامق والغامق والأسود والمائل.

سنقوم هنا باختيار النمط شبه الغامق لـ Sinkin Sans. وسوف نستخدم موقعًا آخر لتحويل الخطوط بدلاً من "Font Squirrel"

ملحوظة: هناك العديد من المحولات الأخرى على الإنترنت. هنا، نحن نستخدم CloudConvert.

• للبدء، انتقل إلى محول OTF الذي يحول ملفاتنا إلى ملفات .woff2 و.woff.
• هنا يمكنك أن ترى أنه يساعدك على تحويل الملفات بسهولة. اختر الملفات التي ستقوم بالتحويل إليها. سنقوم هنا بتحويل الملف Sinkin Sans شبه غامق .otf إلى .woff و .woff2
• بعد اختيار الملف الذي تريد تحويله، " اختر ملف" من سطح المكتب الخاص بك.
• قم بتحويل الملفات وهذا سيستغرق بعض الوقت.
• بعد اكتمال التحويل، قم بحفظ الملفات الضرورية على جهاز الكمبيوتر الخاص بك.

• انتقل إلى برنامج تحميل الخط المخصص للتجزئة
• وأثناء قيامك بإضافة الوزن لنفس الخط، انقر فوق " إضافة وزن الخط" بدلاً من النقر فوق "إضافة خط جديد".

• بعد ذلك، قم بتحميل ملفات الخطوط .woff2 و.woff وفقًا للتعليمات، وتأكد من تحديد سمك الخط على أنه SemiBold 600 .
• انقر على زر "حفظ الإعدادات" لحفظه.
• يمكنك أن ترى كيف يظهر النص. النص أكثر جرأة من النص أعلاه.
• وبالمثل، يمكنك إضافة المزيد من تنوعات الخطوط من خلال النقر على " إضافة وزن الخط " وخط آخر من خلال النقر على " إضافة خط جديد ".

استخدام الخطوط على موقع الويب الخاص بك

دعونا نستخدم الخط الذي تم تحميله على الموقع.

• انتقل إلى المظهر > التخصيص .
• ضمن إعدادات الطباعة ، حدد خيار "النص" لمزيد من التخصيص."
• في خيار "Font Family"، ابحث عن "Sinkin Sans" وحدده.
• بمجرد تحديد الخط، سيُظهر " وزن/نمط الخط " التباين الذي أضفناه سابقًا (عادي 400 وشبه غامق).
• حدد الشكل المناسب ثم شاهد التغييرات مباشرةً في نافذة أداة التخصيص المناسبة.
• يمكنك تعديل حجم الخط وتباعد الحروف وارتفاع الخط حسب رغبتك.
• عندما تشعر بالرضا، انقر فوق "نشر" لتطبيق التغييرات، وسيظهر موقع الويب الخاص بك بمظهره الجديد.

هذا كل ما عليك فعله لتحميل الخطوط المخصصة الخاصة بك. إذا كان لديك أي ارتباك، يمكنك دائمًا التواصل معنا.