הוסף גופנים מותאמים אישית לנושא הקונספט שלך

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

לפני גופן מותאם אישית	לאחר גופן מותאם אישית

אתה יכול להתאים אישית את הגופנים בערכת הנושא הקונספט שלך באמצעות אחת משתי השיטות הבאות:

• ערוך קוד נוזלי (מומלץ בחום)

  להלן מדריך בן 9 שלבים כדי להשיג זאת:

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

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

     

  3. לאחר שיש לך מספיק קבצים, אתה מעלה אותם דרך [מרכז השליטה של ​​מנהל המערכת] > [תוכן] ¹ > [קבצים] ² > [העלה] ³ .

     

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

     

  4. לאחר מכן, חזור ללוח המחוונים לניהול, לחץ על [חנות מקוונת] ¹ > [ערכות נושא] ² > בחר ערכת נושא של מושג > לחץ על [פעולה] ³ > [ערוך קוד] ⁴ .

     

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

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

     

  8. לאחר ההחלפה, זה נראה כמו התמונה הבאה:

     

  9. הערה:

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

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

  

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