גם לי נמאס מפונט אריאל! eironwebמכירים את זה שלפעמים נדמה לכם שכל האתרים בעברית נראים אותו הדבר? שוב פעם פונט אריאל בשחור או בלבן על רקע צבעוני. זה משעמם ונמאס.

באנגלית אפשר להשתולל עם Google Web Fonts בעיקר אם אתם עובדים עם Gantry, אבל בעברית ההיצע דל וההטמעה מסובכת.

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

בפונטים של גוגל יש רק את Alef ואם בוחרים אותו משם זה לא תמיד עובד.

לדעתי יש באג בהטמעה של הפונטים - צריך להוסיף שם https: בשורה 114 בקובץ font.php בתיקיית features שבתוך התבנית, כלומר במקום

הצג/הסתר קוד php

הצג מקור
$gantry->addStyle('//fonts.googleapis.com/css?family=' . str_replace(" ", "+", $name) . $variant);

אמור להיות

הצג/הסתר קוד php

הצג מקור
$gantry->addStyle('https://fonts.googleapis.com/css?family=' . str_replace(" ", "+", $name) . $variant); 

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

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

אתם עוד פה? יופי Cool

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

אז איך מטמיעים אותם באתר שלכם?

אם אתם עובדים עם גאנטרי, הכנתי לכם פיצ'ר ממש טוב וקל לבחירת פונטים.

הוראות הכנה:

אתם תצטרכו עורך טקסט טוב (notepad++ או משהו דומה, אני אוהב לעבוד עם bluefish editor), בכל מקרה - לא עם notepad רגיל של חלונות!

  1. תשכפלו את הקובץ template-options.xml שנמצא בתיקיית התבנית שלכם (לרוב נקראת gantry). תשנו את השם של הקובץ המשוכפל ל-template-options-backup.xml כך שאם הכל יתחרבש תמיד תוכלו לשחזר.
  2. תפתחו את הקובץ template-options.xml ותחפשו את השורות הבאות:
    הצג מקור
    1. <fields name="analytics" type="chain" label="ANALYTICS" description="ANALYTICS_DESC">
    2. <field name="enabled" type="toggle" default="0" label="ANALYTICS_ENABLE"/>
    3. <field name="code" type="text" default="" label="ANALYTICS_CODE" class="text-long"/>
    4. <field name="position" type="hidden" default="analytics" />
    5. </fields>
  3. מיד אחריו תוסיפו את השורות הבאות:
    הצג מקור
    1. <fields name="webfont" type="chain" label="FONT_SETTINGS" description="FONT_SETTINGS_DESC">
    2. <field name="enabled" type="toggle" default="1" label="SHOW" />
    3. <field name="headlines" type="fonts" label="FONT_FAMILY">
    4. <option value="alef">Alef</option>
    5. <option value="carmela">Carmela</option>
    6. <option value="carmelit">Carmelit</option>
    7. <option value="felix007">Felix007</option>
    8. <option value="trashim_clmbold">Trashim</option>
    9. </field>
    10. <field name="bodytext" type="fonts" label="TEXT">
    11. <option value="alef">Alef</option>
    12. <option value="carmela">Carmela</option>
    13. <option value="carmelit">Carmelit</option>
    14. </field>
    15. <field name="position" type="position" default="top-a" label="POSITION"/>
    16. </fields>
  4. וודאו שאחריו מופיע התג </fieldset>
  5. צרו קובץ בשם webfont.php המכיל את התוכן הבא:
  6. הצג מקור
    <?php
    /**
    * @version $Id: webfont.php $
    * @author eironweb
    * @copyright Copyright (C) 2013 Eironweb
    * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
    *
    * Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
    *
    */
    defined('JPATH_BASE') or die();
     
    gantry_import('core.gantryfeature');
     
    class GantryFeatureWebfont extends GantryFeature {
     var $_feature_name = 'webfont';
        function init()
        {
        /** @var $gantry Gantry */
        global $gantry;
        $path = $gantry->templatePath . '/' . 'css' . '/' . 'webfonts'. '/';
        if ($this->get('enabled')) {
                $gantry->addStyle($path . substr($this->get('headlines'),2) . '/stylesheet.css');
                $gantry->addStyle($path . substr($this->get('bodytext'),2) . '/stylesheet.css');
            }
        }
        
        function render($position) {
         ob_start();
         ?>
         <style type="text/css">
                    h1,h2,h3,h4,h5,h6 {font-family: '<?php echo substr($this->get('headlines'),2); ?>';}
                    body, p {font-family: '<?php echo substr($this->get('bodytext'),2); ?>';}
            </style>
             <!-- <h3>טקסט כותרות <?php echo substr($this->get('headlines'),2); ?></h3>
             <p>טקסט רץ <?php echo substr($this->get('bodytext'),2); ?></p> -->
            <?php
         return ob_get_clean();
        }
    }
  7. או שתעתיקו אותו לשרת שלכם מפה
  8. את הקובץ webfont.php שימו בתיקיית features בתוך התבנית גאנטרי שלכם.
  9. תורידו את webfonts.zip ותפרסו אותו בתוך תיקיית css שבתוך התבנית גאנטרי שלכם.
  10. כדי להפעיל כנסו לממשק הניהול בתבנית גאנטרי שלכם. לכו ל-features בשורה האחרונה תהיה לכם אפשרות לבחור פונט לכותרות (h1,h2,h3,h4,h5,h6) ופונט לטקסט רץ.
  11. תהנו Cool

משהו אחרון לסיום 

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

הצג/הסתר קוד css

הצג מקור
 
 
@font-face {
font-family: 'Carmela';
src: url('Fonts/carmela.eot');
src: url('Fonts/carmela.eot?#iefix') format('embedded-opentype'),
url('Fonts/carmela.woff') format('woff'),
url('Fonts/carmela.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
 
body {
font-family:Carmela;
font-size:15x;
line-height:18px;
font-weight:normal;
}
 
 

עליך להירשם כדי להוסיף תגובות

אסף עירון

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