הוסף גופנים מותאמים אישית לנושא ה-Shopify שלך

Shopify מספקת מאות גופנים בחינם לשימוש עבור החנות שלך. עם זאת, עליך להשתמש בגופן מותאם אישית כדי להתיישר עם קו המנחה של המותג שלך, אך הוא אינו נתמך על ידי Shopify, אתה עדיין יכול להוסיף אותו לערכת הנושא שלך. להלן מדריך כיצד לעשות זאת:

1. אתה צריך שהגופן שלך יהיה זמין תחילה. לחלק מהגופנים יש רישיונות, אז ודאו שאתם רוכשים אותם כראוי לשימושכם. צוות התמיכה שלנו לא יהיה אחראי על קבלת הגופנים הנדרשים.

2. לאחר מכן, הכינו שני קבצים בפורמט .woff ו- .woff2 עבור כל סגנון גופן שיתווסף. זה כדי לוודא שהגופן שהוספת יהיה קריא בכל סוגי הדפדפנים.

   

3. לאחר שיש לך מספיק קבצים, אתה מעלה אותם לתיקיה File בהגדרות Theme .

   

   לכל קבצי הגופן שהעלית יש את כפתור השרשרת בצד ימין כדי לספק את הקישור לקובץ לפעולת ההעתקה שלך.

   

4. לאחר מכן, חזור ללוח המחוונים של הניהול שלך, לחץ על חנות מקוונת > ערכות נושא ובחר נושא תהייה שלך כדי לערוך עוד יותר. לחץ על ... > ערוך קוד .

   

5. בחלון הפתוח של עריכת קוד, אתה מנווט לתיקיה Snippets בעמודה השמאלית. בתיקייה זו, לחץ על הקובץ "css-variables.liquid" כדי להוסיף קוד מותאם אישית עבור הגופן החדש.

   

6. בקובץ הפתוח "css-variables.liquid", אתה מוסיף קודים נוספים תחת סגנון הכרטיסייה. ניתן למצוא אותו תחת הטקסט {%- style -%} . הקודים מתווספים באופן הבא:

    @font-face {
    font-family: "MyFontHeading";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }
   
    @font-face {
    font-family: "MyFontBody";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }

   הערה: קטעי טקסט נטוי מותאמים אישית על ידך. מספר הקודים של @font-face{ } שיתווספו תלוי במספר סגנונות הגופן שיש לך.

   

7. לאחר מכן, אתה:

   • חפש את הטקסט "font-heading-family" והחלף את כל החלקים של {{...}} בטקסט שהוספת עבור שורת font-family ('MyFontBody' בדוגמה שלנו).

   • חפש את הטקסט "font-body-family" כדי לנווט לשורת הקוד הרלוונטית והחלף את כל החלקים של {{...}} בטקסט שהוספת עבור font-family בקודים של שלב 6 (בדוגמה שלנו, זה 'MyFontHeading')

8. לאחר ההחלפה, הקוד המוער בתיבה האדומה מוחלף בקוד בתיבה הירוקה. זה נראה כמו התמונה למטה:

   

9. לבסוף, לחץ על שמור .

פֶּתֶק:

• ההגדרות בהגדרות ערכת נושא > טיפוגרפיה כבר לא בתוקף, לא משנה מה תגדיר כאן ברגע שתוסיף את הקודים האלה בקובץ "css-variables.liquid".
• כל ההוראות לעיל חלות כאשר אתה מחיל את אותו גופן מותאם אישית עבור כל החלקים והחסימות. במקרה שאתה צריך להחיל גופנים שונים עבור חלקים או בלוקים שונים, תהליך העריכה יהיה הרבה יותר מסובך, אנא צור קשר עם צוות התמיכה שלנו כדי לקבל עזרה נוספת.

צריך סיוע נוסף

אם אתה נתקל בבעיות כלשהן או זקוק לעזרה נוספת בנושא ה-BeYours שלך, אנא פנה לחברי התמיכה שלנו באמצעות מערכת הכרטיסים שלנו לקבלת סיוע תוך 8 שעות.

סרוק את קוד ה-QR למטה כדי להצטרף לקהילת WhatsApp שלנו לקבלת עדכונים, חדשות והודעות.