إضافة خط خاص في متجرك بواسطة GitHub

في بيئة تتسارع فيها المنافسة، يصبح الخط أحد أقوى أدوات التميز البصري للعلامة التجارية. و ميزة رفع الخط الخاص من صفحة (تخصيص المتجر) تمكّنك من إبراز هويتك بأسلوب احترافي، بسيط، وبدون أي تعقيد تقني.

📌 المحاور الرئيسية للمقالة:

- رفع الخطوط الخاصة في سلة

- إنشاء كود الخط في منصة GitHub.

- ربط الخط في منصة سلة.

🚀 رفع الخطوط الخاصة في سلة

توفر منصة سلة عدة خيارات لتخصيص الخطوط المستخدمة في المتجر, وهي:

1. خطوط سلة.

2. خطوط Google المتنوعة.

3. رفع الخط الخاص, الذي صممته أو اشتريته من أي مصمم أو من مواقع مثل:

-الفونت

-عرب فونتس

كل ما تحتاجه هو: رفع ملف الخط (TTF) إلى سيرفر خارجي،ثم تضمين رابط ملف CSS ليتمكن النظام من قراءة اسم الخط وتحميله بالشكل الصحيح., ويمكنك استخدام سيرفرك الخاص أو أي خدمة استضافة ملفات.

في هذه المقالة، سنشرح طريقة رفع الخطوط باستخدام GitHub، الذي يوفر تجربة مجانية وسهلة دون تعقيد برمجي.

🚀 إضافة الخط في منصة GitHub

- رفع ملف الخط بصيغة (tff)

1. سجل دخولك إلى منصة GitHub, ومن الصفحة الرئيسية لمنصة اضغط (New repository).

2. ادخل اسم الملف أو المستودع, وتحقق بأن يكون اختيارك لظهور الخط (Public), ثم اضغط (Create repository).

📝 ملاحظة هامة: لاتقم بتغيير أي مدخلات أخرى.

3. اضغط (uploading an existing file) لرفع خطك الذي ترغب بإضافته في سلة.

4. ارفع ملف الخط و تأكد بأن تكون صيغة الخط (ttf) واضغط (commit changes).

تم رفع ملف الخط بنجاح!

- إضافة ملف التنسيق (CSS)

1. لربط الخط في سلة, عليك إضافة ملف CSS بالضغط (Create New file).

2. ادخل اسم للملف بشرط أن ينتهي ب (css.) مثل: (salla.css)

🛑تنبيه هام:

-يجب أن يكون الاسم باللغة الانجليزية.

-وأن يكون الاسم بدون مسافات مثل: (sallafont) وليس ( salla font)

-وأن يبدا بأحرف صغيرة مثل: (salla) وليس (Salla)

3. الصق الكود التالي في صندوق النص:

@font-face {
font-family: "Alfares";
font-style: normal;
src: url(Alfares.ttf) format("ttf");
font-display: auto;
}

@font-face {
font-family: "Alfares";
font-style: normal;
font-weight: 700;
src: url(Alfares.ttf) format("truetype");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}

body {
font-family: "Alfares", cursive;
text-align: center;
}

h1 {
font-weight: 700;
}

h2 {
font-weight: 400;
}