كيفية إضافة خطوط مخصصة إلى Squarespace مثل المحترفين

هل تريد إضافة خطوط مخصصة إلى Squarespace؟

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

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

ربما يتعلق الأمر بمظهر معين تريد إنشاؤه لعناصر داخل موقع الويب الخاص بك.

مهما كان السبب ، من السهل إضافة خطوط مخصصة إلى Squarespace - ما عليك سوى اتباع هذه العملية!

كيفية إضافة خط مخصص إلى موقع Squarespace الخاص بك

تعد إضافة خط تختاره إلى موقع Squarespace الإلكتروني الخاص بك أمرًا بسيطًا للغاية ، ولكن هناك القليل من CSS لإضافته.

تأكد من أنك موافق على فعل ذلك قبل أن تبدأ ، أو اختر شخصًا ما.

الخطوة 1. اختر الخط الخاص بك

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

هناك الكثير من الأماكن للعثور على الخطوط المجانية والمدفوعة ، مثل Creative Market. لكن تحقق من الترخيص قبل إضافة واحد إلى موقع الويب الخاص بك.

الخطوة 2. تحضير ملفات خطوط الويب الخاصة بك

لإضافة خط إلى موقع الويب ، ستحتاج إلى ثلاثة تنسيقات لملفات الخطوط:

1. .ttf أو .otf
2. .woff
3. .woff2

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

بخلاف ذلك ، اجعل أنواع الملفات الثلاثة جاهزة للإضافة.

الخطوة 3. قم بتحميل ملفات الخطوط الخاصة بك إلى Squarespace

انتقل إلى Design> Custom CSS> Manage Custom Files

هنا ستضيف الخطوط عبر زر التحميل.

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

الخطوة 4. قم بتسمية الخط المخصص الخاص بك في Squarespace

بمجرد تحميل الخط ، ستحتاج إلى إخبار Squarespace بمكانه وما هو باستخدام محرر CSS.

استخدم الكود التالي:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

خذ هذا وأضف المعلومات ذات الصلة للخط الخاص بك:

• اسم الخط: استبدل هذا باسم الخط الخاص بك بناءً على اسم الملف أو أي شيء ستتذكره.
• عناوين URL للخطوط: استبدلها بعنوان (عناوين) URL للخطوط التي قمت بتحميلها للتو. احصل على عنوان URL من منطقة التحميل الخاصة بك (بنفس الطريقة التي تستخدمها لعنوان URL للصورة) وأضفه في المكان.

الخطوة 5. تحديد مكان وكيفية استخدام الخط المخصص

أخيرًا ، ما عليك سوى إخبار Squarespace بمكان استخدام الخطوط المختلفة على موقع الويب الخاص بك.

يمكن أن يكون هذا في أماكن مثل الرؤوس أو رأس الموقع أو الأزرار أو حتى شيء مثل كتلة الرسائل الإخبارية.

كيفية استخدام الخط الخاص بك في الأماكن المشتركة

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

فيما يلي بعض الأمثلة الشائعة وكيفية القيام بذلك.

كيفية تغيير خطوط رأس الموقع

رأس الموقع هو المنطقة الموجودة أعلى شريط التنقل.

قد يكون لديك الكثير من الروابط هنا ، وشعار نصي وربما إعلان.

يمكن تغيير خط كل هذه باستخدام مقتطف CSS التالي:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

تذكر استبدال YOURNAME باسم الخط الخاص بك.

كيفية تغيير خطوط الأزرار

مكان شائع آخر لاستخدام الخطوط المخصصة هو أزرار موقع الويب الخاص بك.

هناك ثلاث مجموعات من الأزرار: صغيرة ومتوسطة وكبيرة. يمكنك تغيير واحد أو كل منهم بالكود التالي:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

تذكر استبدال YOURNAME باسم الخط الخاص بك.

قم بتثبيته على Pinterest حتى تتمكن من العودة لاحقًا!

(المزيد من تلميحات الخطوط المخصصة واستكشاف الأخطاء وإصلاحها بعد الرسم).

كيفية تغيير خطوط كتلة الرسائل الإخبارية

يسمح حظر الرسائل الإخبارية للأشخاص بالتسجيل في قائمة البريد الإلكتروني الخاصة بك. كثير من الناس يستخدمون ملحقات مختلفة لهذا الغرض.

ولكن إذا كنت تستخدم الكتلة داخل Squarespace ، فستتيح لك الشفرة التالية إضافة خط مخصص.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

تذكر استبدال YOURNAME باسم الخط الخاص بك.

كيفية تغيير خطوط نشر المدونة

من أكثر الأشياء شيوعًا التي يمكن القيام بها باستخدام الخط استخدامه في منشورات المدونة.

تحتاج إلى النظر في عنوان الصفحة والأوصاف وعناوين المنشورات على صفحات المقالات عند القيام بذلك.

ربما تريدهم جميعًا أن يكونوا متشابهين.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

تذكر استبدال YOURNAME باسم الخط الخاص بك.

كيفية تغيير خطوط كتلة الاقتباس

المثال الأخير هو تغيير Quote Block إلى خط مختلف.

يستخدم هذا للاقتباسات في المنشورات ولكن أيضًا لأشياء مثل شهادات العملاء أو المراجعات.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

تذكر استبدال YOURNAME باسم الخط الخاص بك.

قد يعجبك أيضًا دليل حجم صورة Squarespace الخاص بي.

مشاكل الخط المخصص

تعد إضافة الخطوط مهمة سهلة بمجرد التعامل مع القليل من CSS. ولكن هناك بعض الأخطاء الشائعة التي تم الإبلاغ عنها.

رسالة "الخطوط غير المدعومة" في أنماط الموقع

من حين لآخر ، قد ترى رسالة "خط غير مدعوم" على موقعك. يحدث هذا عند استخدام Adobe Font ثم تقاعده Adobe.

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

يبدو الخط مختلفًا عند تسجيل الدخول

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

إذا لاحظت ذلك ، فاتصل بدعم Squarespace ويمكنهم الاطلاع على الإعدادات لمعرفة ما يلزم تعديله.

لا يمكنني ضبط الخط على حجم معين

عادة ما تتعلق مشاكل تعيين حجم معين للخط بالواجهة الخلفية لموقع الويب الخاص بك. يمكن أن يكون ذلك بسبب إصدار Squarespace الذي تستخدمه.

لذلك ، تواصل مع الدعم للحصول على مساعدتهم بشأن ما قد يكون خطأ.

أضف خطوطك المخصصة إلى Squarespace

بلمسة من CSS ، يمكنك إضافة ملفات خطوط مخصصة بسرعة إلى Squarespace.

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

سهل محرر النمط تخصيص موقع الويب الخاص بك بما يتجاوز خيارات الخطوط المضمنة.

إذن كيف يمكنك استخدام الخطوط المخصصة لجعل موقع الويب الخاص بك يبدو أكثر ذكاءً؟