Google איך מורידים מגוגל פונט קבצי פונט לweb?

[זווית]

פונט שלא נמצא באלמנטור
אני לא מוצאת דרך לקבל קבצי web
איך עושים זאת בלי תבניות בת וcss?

 

[דידקטית]

כל מה שצריך כדי לשנות פונט,
זה שורה אחת בCSS

body{
    font-family: heebo, sans-serif !important;
}

במקום heebo - לשים את השם של הפונט מגוגל
sans-serif - זה פונט ברירת מחדל. כלומר, אם האתר לא יצליח לטעון את הפונט מגוגל - הוא יציג במקום פונט sans-serif.

את השורה מדביקים בתבנית הגלובלית של אלמנטור

או בהתאמה אישית > css

 

[זווית]

במקום heebo - לשים את השם של הפונט מגוגל
sans-serif - זה פונט ברירת מחדל. כלומר, אם האתר לא יצליח לטעון את הפונט מגוגל - הוא יציג במקום פונט sans-serif.

ואם אני רוצה אותו רק במקומות ספיציצים באתר
בטח לא ילך

 

[דידקטית]

האופציה הקלה:
להדביק את הקוד הבא בcss מותאם של כל וידג'ט שאת רוצה אותו בפונט של גוגל הנ"ל

selector{
    font-family: heebo, sans-serif !important;
}

האופציה החכמה:
1. לתת class לכל וידג'ט שאת רוצה אותו בפונט גוגל הנ"ל (בדוגמה להלן השתמשתי בclass בשם custom-font)
2. להדביק את הקוד הבא בתבנית הגלובלית של אלמנטור

.custom-font{
    font-family: heebo, sans-serif !important;
}

 

[זווית]

האופציה הקלה:
להדביק את הקוד הבא בcss מותאם של כל וידג'ט שאת רוצה אותו בפונט של גוגל הנ"ל

selector{
    font-family: heebo, sans-serif !important;
}

האופציה החכמה:
1. לתת class לכל וידג'ט שאת רוצה אותו בפונט גוגל הנ"ל (בדוגמה להלן השתמשתי בclass בשם custom-font)
2. להדביק את הקוד הבא בתבנית הגלובלית של אלמנטור

.custom-font{
    font-family: heebo, sans-serif !important;
}

תודה!
באמת אין אופציה להוריד גוגל פונט לווב?

 

[this my name]

בעיקרון אפשר מפה:

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

[זווית]

בעיקרון אפשר מפה:

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

קבצי web?

 

[זווית]

@חגית קרמר זה עובד מעולה
תודה!

 

[דידקטית]

יש אפשרות להטמיע לינק של גוגל פונטס בקוד,
אבל פה זה מיותר.

(הורדת קבצים נצרכת רק בפונטים קנויים)

 

[שלמה ויסברג]

יש אפשרות להטמיע לינק של גוגל פונטס בקוד,
אבל פה זה מיותר.

(הורדת קבצים נצרכת רק בפונטים קנויים)

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

הרבה בוני אתרים ממליצים על זה
למשל כאן

 

[דידקטית]

Server stored fonts vs Google fonts?

What is better in speed and reliability, to store the font in my project (say in Styles folder) or to link to a font from Google? ie @font-face { font-family: 'myfont'; src: url(gothic.tt...

stackoverflow.com

 

[זווית]

Server stored fonts vs Google fonts?

What is better in speed and reliability, to store the font in my project (say in Styles folder) or to link to a font from Google? ie @font-face { font-family: 'myfont'; src: url(gothic.tt...

stackoverflow.com

מעניין למה לא כל הגוגל פונט מעודכנים באלמנטור

 

[זווית]

מעניין למה לא כל הגוגל פונט מעודכנים באלמנטור

לרגע חשבתי שחזרת לקמפיין הנשכח מלב של נטפרי

 

[זווית]

האופציה הקלה:
להדביק את הקוד הבא בcss מותאם של כל וידג'ט שאת רוצה אותו בפונט של גוגל הנ"ל

selector{
    font-family: heebo, sans-serif !important;
}

האופציה החכמה:
1. לתת class לכל וידג'ט שאת רוצה אותו בפונט גוגל הנ"ל (בדוגמה להלן השתמשתי בclass בשם custom-font)
2. להדביק את הקוד הבא בתבנית הגלובלית של אלמנטור

.custom-font{
    font-family: heebo, sans-serif !important;
}

@חגית קרמר
מה יכולה להיות הסיבה שבחלק מקומות הקוד עובד ובחלק לא?
ניסיתי גם בclass של כל האתר וגם בעמוד ספציפי וגם בווידגט ספציפי
ולא עובד

במקום אחר כן עובד מושפע מהגדרות css גלובליות

 

[דידקטית]

כנראה הסלקטור צריך להיות יותר ספציפי
(לא סתם selector - שמתייחס לכל הוידג'ט,
אלא למצוא את הclass או הid הספציפיים בתוך הוידג'ט)

 

[זווית]

כנראה הסלקטור צריך להיות יותר ספציפי
(לא סתם selector - שמתייחס לכל הוידג'ט,
אלא למצוא את הclass או הid הספציפיים בתוך הוידג'ט)

הגדרתי class של כמה פיסקאות
על פסקה אחת הוא מחיל את הקוד ועל השניה לא
ממש מוזר

 

[roni ravitz]

בעקרון כן צריך להטמיע את הפונט של גוגל באתר (יש כמה דרכים), אם יש את הפונט הזה כבר באלמנטור, ונעשה בו שימוש בעמוד, אז אלמנטור מטמיעים אותו, ואז מספיק עם css לקבוע את הפונט

 

[זווית]

בעקרון כן צריך להטמיע את הפונט של גוגל באתר (יש כמה דרכים), אם יש את הפונט הזה כבר באלמנטור, ונעשה בו שימוש בעמוד, אז אלמנטור מטמיעים אותו, ואז מספיק עם css לקבוע את הפונט

למה צריך להטמיע
אין את הפונט באלמנטור
רק ע"י קוד css
לבקש מאלמנטור שיטמיעו את הפונט?

 

[roni ravitz]

תראה כאן אולי יעזור,

- YouTube

Auf YouTube findest du die angesagtesten Videos und Tracks. Außerdem kannst du eigene Inhalte hochladen und mit Freunden oder gleich der ganzen Welt teilen.

youtu.be

 

[זווית]

לבסוף מצאתי את האופציה המעולה הזו

google webfonts helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

google-webfonts-helper.herokuapp.com