في بيئة تتسارع فيها المنافسة، يصبح الخط أحد أقوى أدوات التميز البصري للعلامة التجارية. و ميزة رفع الخط الخاص من صفحة (تخصيص المتجر) تمكّنك من إبراز هويتك بأسلوب احترافي، بسيط، وبدون أي تعقيد تقني.
📌 المحاور الرئيسية للمقالة:
- رفع الخطوط الخاصة في سلة
- إنشاء كود الخط في منصة 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;
}
⚠️ في الكود المرفق alfares هو اسم الخط المستخدم يمكنك استبداله باسم الخط عندك.
4. بعد لصق الكود, استبدل النصوص المظللة بـ اسم الخط, بشرط أن يطابق الاسم المكتوب في الملف المرفق في خطوة رقم (4) بالأعلى.
بهذا الشكل,ثم اضغط (Commit changes).
5. أبقِ الإعدادات كما هي واضغط (Commit changes).
تم إضافة الخط بجاح!, تبقى خطوات أخيرة لربط الخط بمتجرك في منصة سلة.
6. من صفحة الخطوط ومن شريط التبويبات اضغط (settings) ومن لوحة التحكم الجانبية اضغط (Pages).
7. من قسم (Branch) اضغط (main) ثم اضغط (Save).
- رفع ملف (html)
1. من شريط التبويبات اضغط (Code) ثم (add file) واختر (Create new file).
2. لاتقم بأي تعديل, ادخل اسم للملف بشرط أن ينتهي ب (html.) مثل: (salla.html)
واضغط (commit changes).
أضيفت الخطوط بنجاح!
🚀 ربط الخط في منصة سلة
1. اضغط التبويب (settings) ومن لوحة التحكم الجانبية اضغط (Pages) ثم (visit site) .
2. من الرابط , الصق اسم ملف خط الCSS المطابق.
المقصود باسم ملف خط الCSS المطابق.
3. عندما يظهر الكود في الصفحة, انسخ الرابط وأضفه في رابط تخصيص الثيم:
وفي قسم اسم الفونت الخاص, ادخل الاسم الخاص بخط في (Font Family) بشرط أن يطابق اسم الخط في الملف واضغط (حفظ التغييرات).
تهانينا! ظهر الخط في متجرك بنجاح.
