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

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

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

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

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

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

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

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

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

    @סוג גופן {
    font-family: " MyFontHeading ";
    src: url(' הוסף קישור לקובץ הגופן שלך ') format("woff2"),
    url(' הוסף קישור לקובץ הגופן שלך ') format("woff"); }

    @סוג גופן {
    font-family: " MyFontBody ";
    src: url(' הוסף קישור לקובץ הגופן שלך ') format("woff2"),
    url(' הוסף קישור לקובץ הגופן שלך ') format("woff"); }

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

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

הערה :

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

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

Back to תמיכה ב-Be Yours