Google Web Fonts avec Gantry

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Google Web Fonts avec Gantry

    Bonjour,

    je suis entrain de créer mon site en local (wamp) en 2.5 avec un template qui fonctionne sur Gantry.

    J'ai cherché tout un après-midi pourquoi le google web fonts, intégré à l'interface du style ERIS (nom du template), ne fonctionne pas en front.
    Cliquez sur l'image pour l'afficher en taille normale

Nom : webfonts-1.jpg 
Affichages : 1 
Taille : 7,6 Ko 
ID : 1816134

    Après plusieurs manip sur les fichiers fonts.php et webfonts.php grâce à ce forum, ça ne marche toujours pas...

    Alors je me suis dis : mais... je suis en local ?! c'est peut être pour ça que mon site ne peut pas aller chercher les polices sur google!

    Qu'est-ce que vous en dites? Bonne déduction ou bien il faut que je remette les mains dans le code?

    D'avance merci.

  • #2
    Re : Google Web Fonts avec Gantry

    Bonjour,



    ...Difficile de dire ce qui empêche les Google Fonts de s'afficher correctement dans votre cas et avec ce template, mais elles apparaissent parfaitement bien en local avec les templates Rockettheme, eux aussi basés sur Gantry.

    Avec ces derniers précisément, les liens pointant vers les polices Google sont en dur dans l'en-tête de la page. Ainsi, on trouve cette ligne dans le code source de la démo du template en ligne. :

    Code:
    <link rel="stylesheet" href="[URL="http://forum.joomla.fr/view-source:http://fonts.googleapis.com/css?family=Cuprum"]http://fonts.googleapis.com/css?family=Cuprum[/URL]" type="text/css" />
    Si cette ligne est absente du code source de votre site en local, il est normal que la police ne soit pas disponible et ne s'affiche pas. Mais pourquoi ne s'y trouverait-elle pas (si c'est le cas), c'est difficile à deviner...


    Qu'est-ce que vous en dites?
    ...Que :

    (1) Le template est plaisant, mais que le décrire comme on peut le lire comme « a free premium joomla » paraît contradictoire, à moins de lire également la suite, à savoir « Unfortunately free support isn't included in this template ». Traduction : le template est gratuit et le support payant.

    (2) Que vous avez déjà passé un après-midi à résoudre un problème, un seul et sans succès.

    Et (3) qu'un beau template commercial basé sur Gantry, qui fonctionne très bien, avec possibilité d'en tester à votre gré une vingtaine avant d'en choisir un + un support technique pendant 3 mois + toutes les extensions que vous voulez par-dessus le marché, tout cela ensemble nécessite une souscription qui coûte environ le prix d'une heure de travail TTC.

    Donc... (je vous laisse le soin de conclure) ou alors il faut avoir du temps devant soi.



    Cordialement,



    PhilJ
    Dernière édition par PhilJ à 25/08/2012, 03h51
    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

    Commentaire


    • #3
      Re : Google Web Fonts avec Gantry

      Merci de votre réponse , vos dernières remarques m'aident à prendre du recul sur la question.

      Je vais continuer à gratter mais si je perd trop de temps je me tournerai vers un template commercial.
      Je persiste un peu car mon site ne va contenir que 5 pages maxi et que ce template free correspond bien à ce que je veux.

      Voici le HEAD de l'index.php du template :
      Code:
         <head>
          
          <meta charset="utf-8" />
      
      
          <?php
      		$document =& JFactory::getDocument();
      		$parameter_script = 'metaTags';
      		$headerstuff=$document->getHeadData();
           	unset($headerstuff[$parameter_script]['http-equiv']);
      		$document->setHeadData($headerstuff);
      	 
              $gantry->displayHead();
              $gantry->addStyles(array('template.css', 'fusionmenu.css', 'custom.css'));
      			
      		// add favicon
              if($gantry->get('favicon-fav') != '') {
      			echo '<link rel="shortcut icon" href="'.JURI::base().$gantry->get('favicon-fav').'"/>'."\n";
      		} else {
      			echo '<link rel="shortcut icon" href="'.JURI::base().'templates/'.$this->template.'/images/favicon.png"/>'."\n";
      		}
      		//add apple favicon
      		if($gantry->get('favicon-favapple') != '') {
      			echo '<link rel="apple-touch-icon" href="'.JURI::base().$gantry->get('favicon-favapple').'"/>'."\n";
      		}
              ?>
      	<!--[if lte IE 8]>
      	<link rel="stylesheet" type="text/css" href="<?php echo JURI::base(); ?>templates/<?php echo $this->template; ?>/css/ie_old.css" />	<![endif]-->
              
          </head>
      Comme vous le constaterez, il n'y a pas de référence aux polices de google.

      Mais il y a un fichier fonts.php dans le admin du template où l'on peut lire :

      Code:
          var $_google_fonts = array("Aclonica", "Allan", "Allerta", "Allerta Stencil", "Amaranth", "Annie Use Your Telescope", "Anonymous Pro", "Anton", "Architects Daughter", "Arimo", "Artifika", "Arvo", "Asset", "Astloch", "Bangers", "Bentham", "Bevan", "Bigshot One", "Brawler", "Buda", "Cabin", "Cabin Sketch", "Calligraffitti", "Candal", "Cantarell", "Cardo", "Carter One", "Caudex", "Cedarville Cursive", "Cherry Cream Soda", "Chewy", "Coda", "Coming Soon", "Copse", "Corben", "Cousine", "Covered By Your Grace", "Crafty Girls", "Crimson Text", "Crushed", "Cuprum", "Damion", "Dancing Script", "Dawning of a New Day", "Didact Gothic", "Droid Sans", "Droid Sans Mono", "Droid Serif", "EB Garamond", "Expletus Sans", "Fontdiner Swanky", "Francois One", "Geo", "Goblin One", "Goudy Bookletter 1911", "Gravitas One", "Gruppo", "Hammersmith One", "Holtwood One SC", "Homemade Apple", "IM Fell", "Inconsolata", "Indie Flower", "Irish Grover", "Josefin Sans", "Josefin Slab", "Judson", "Jura", "Just Another Hand", "Just Me Again Down Here", "Kameron", "Kenia", "Kranky", "Kreon", "Kristi", "La Belle Aurore", "Lato", "League Script", "Lekton", "Limelight", "Lobster", "Lobster Two", "Lora", "Luckiest Guy", "Maiden Orange", "Mako", "Maven Pro", "Meddon", "MedievalSharp", "Megrim", "Merriweather", "Metrophobic", "Michroma", "Miltonian", "Molengo", "Monofett", "Mountains of Christmas", "Muli", "Neucha", "Neuton", "News Cycle", "Nixie One", "Nobile", "Nova", "Nunito", "OFL Sorts Mill Goudy TT", "Old Standard TT", "Open Sans", "Orbitron", "Oswald", "Over the Rainbow", "PT Sans", "PT Serif", "Pacifico", "Paytone One", "Permanent Marker", "Philosopher", "Play", "Playfair Display", "Podkova", "Puritan", "Quattrocento", "Quattrocento Sans", "Radley", "Raleway", "Redressed", "Reenie Beanie", "Rock Salt", "Rokkitt", "Ruslan Display", "Schoolbell", "Shadows Into Light", "Shanti", "Sigmar One", "Six Caps", "Slackey", "Smythe", "Sniglet", "Special Elite", "Sue Ellen Francisco", "Sunshiney", "Swanky and Moo Moo", "Syncopate", "Tangerine", "Tenor Sans", "Terminal Dosis Light", "The Girl Next Door", "Tinos", "Ubuntu", "Ultra", "UnifrakturCook", "UnifrakturMaguntia", "Unkempt", "VT323", "Varela", "Vibur", "Vollkorn", "Waiting for the Sunrise", "Wallpoet", "Walter Turncoat", "Wire One", "Yanone Kaffeesatz", "Zeyada");

      Commentaire


      • #4
        Re : Google Web Fonts avec Gantry

        Voici le HEAD de l'index.php dans le démonstration en ligne du même template :
        Code:
            <head>
            
            <meta charset="utf-8" />
        
        
              <base href="http://www.hogash.com/demo/eris_joomla/" />
          <meta name="generator" content="Joomla! - Open Source Content Management" />
          <title>ERIS | Free Premium Joomla 2.5 Template</title>
          <link href="/demo/eris_joomla/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
        
          <link href="/demo/eris_joomla/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
          <link rel="stylesheet" href="/demo/eris_joomla/libraries/gantry/css/grid-12.css" type="text/css" />
          <link rel="stylesheet" href="/demo/eris_joomla/templates/eris/css/gantry-override.css" type="text/css" />
          <link rel="stylesheet" href="/demo/eris_joomla/templates/eris/css/joomla-override.css" type="text/css" />
          [B][COLOR=#008000]<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cuprum" type="text/css" />[/COLOR][/B]
          <link rel="stylesheet" href="/demo/eris_joomla/templates/eris/css/template.css" type="text/css" />
          <link rel="stylesheet" href="/demo/eris_joomla/templates/eris/css/fusionmenu.css" type="text/css" />
          <link rel="stylesheet" href="/demo/eris_joomla/templates/eris/css/custom.css" type="text/css" />
          <link rel="stylesheet" href="/demo/eris_joomla/media/system/css/modal.css" type="text/css" />
        
          <link rel="stylesheet" href="/demo/eris_joomla/modules/mod_newsletter_subscribe/css/styles.css" type="text/css" />
          <link rel="stylesheet" href="http://www.hogash.com/demo/eris_joomla/modules/mod_plusslider/assets/css/plusslider.css" type="text/css" />
          <style type="text/css">
        body {background:#ffffff; color:#353535; }body a {color:#7aa908;}#rt-bottom {background:#252525;}#rt-footer, .author_link {background:#252525;}#rt-header {background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));
        background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
        background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
        background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
        background: linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
        }.plusslider-pagination li.current {border-color:#7aa908;}.learn-more, .rt-readon-surround .readon, input[type=submit], button {background-color:#7aa908;}.featured_box, #rt-breadcrumbs  {background-color:#7aa908;}img.thumb:hover {border-color:#7aa908;}#rt-main .sidebar {-webkit-box-shadow:0 2px 0 #7aa908; -moz-box-shadow:0 2px 0 #7aa908; box-shadow:0 2px 0 #7aa908; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Cuprum', 'Helvetica', arial, serif; }
        body #rt-logo {background:url(http://www.hogash.com/demo/eris_joomla/images/logo.png) no-repeat center center;width:202px;height:53px; padding:20px 0 20px 0;}
        
        #flickr_container_106 img {width:40px; height:40px;}
        
        #slideshow {border-bottom: 3px solid #e4e4e4;}
        #slideshow > .plusslider {left:50%; margin-left:-962px; height:500px; width:1920px; position: relative;}
          </style>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
          <script src="http://www.hogash.com/demo/eris_joomla/plugins/system/jquery/jquery.noconflict.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/mootools-core.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/core.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/caption.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/mootools-more.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/modules/mod_roknavmenu/themes/fusion/js/fusion.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/modal.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/media/system/js/validate.js" type="text/javascript"></script>
          <script src="/demo/eris_joomla/modules/mod_newsletter_subscribe/scripts/subscribe.js" type="text/javascript"></script>
          <script src="http://www.hogash.com/demo/eris_joomla/modules/mod_plusslider/assets/js/jquery.plusslider.js" type="text/javascript"></script>
        
          <script type="text/javascript">
        
        
        window.addEvent('domready', function() {
                        new Fusion('ul.menutop', {
                            pill: 0,
                            effect: 'slide and fade',
                            opacity:  1,
                            hideDelay:  500,
                            centered:  0,
                            tweakInitial: {'x': -10, 'y':-10},
                            tweakSubsequent: {'x':  0, 'y':  0},
                            tweakSizes: {'width': 20, 'height': 20},
                            menuFx: {duration:  300, transition: Fx.Transitions.Circ.easeOut},
                            pillFx: {duration:  400, transition: Fx.Transitions.Back.easeOut}
                        });
                    
        });
        window.addEvent('load', function() {
        });
        
                window.addEvent('domready', function() {
        
                    SqueezeBox.initialize({});
                    SqueezeBox.assign($$('a.modal'), {
                        parse: 'rel'
                    });
                });
        (function($){
            $(window).load(function(){
                $(".plusslider92").show().plusSlider({
                    width: 1920,
                    height: 500,
                    sliderType: "slider",
                    sliderEasing: "easeOutQuad",
                    displayTime: 5000,
                    speed: 300,
                    defaultSlide: 0,
                    autoPlay: true,
                    keyboardNavigation: true,
                    pauseOnHover: true,
                    createArrows: true,
                    createPagination: true
                });
            });
        })(jQuery);
        
          </script>
        <link rel="shortcut icon" href="http://www.hogash.com/demo/eris_joomla/images/favicon.png"/>
            <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href="http://www.hogash.com/demo/eris_joomla/templates/eris/css/ie_old.css" />    <![endif]-->
                
            </head>
        ...En vert, la ligne incorporant la police 'Cuprum'.

        Une idée de dépannage, sans vous préoccuper du template : installez une extension (en l'occurrence un plugin) permettant d'incorporer la (ou les) police(s) de votre choix, par exemple HD-GFonts, qui est efficace et simple d'emploi (et fonctionne bien avec les templates Gantry testés).



        Bon week-end (studieux ?),




        PhilJ
        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

        Commentaire


        • #5
          Re : Google Web Fonts avec Gantry

          Ok je vais tester cet utilitaire mais je reste quand même un peu sur ma fin...
          Je vous tiens au courant, merci.

          Commentaire


          • #6
            Re : Google Web Fonts avec Gantry

            Envoyé par BARRABAN Voir le message
            mais je reste quand même un peu sur ma fin...

            ...« Sur ma fin », c'est le cas de le dire, ou plutôt de l'écrire de cette façon .

            Il ne faut surtout pas que cette expérience vous coupe l'appétit, mais croyez-moi ou non, si le libre et gratuit est souvent avantageux, pour un professionnel comme pour un amateur (Joomla au premier chef en est une illustration éclatante), il ne l'est pas toujours, pas systématiquement, pas dans tous les cas, et il n'est pas rare qu'un produit gratuit se révèle plus coûteux en temps, en énergie, et même en argent, qu'un produit commercial, surtout quand le prix de ce dernier est raisonnable.

            En se débrouillant bien, un amateur peut ainsi réaliser un site internet de qualité pour quelques dizaines d'euros. Vouloir à tout prix que rien n'ait un prix est en revanche déraisonnable. « Les gens connaissent le prix de tout et la valeur de rien » disait Oscar Wilde... A méditer.

            Cela dit et compris, il est vrai qu'on apprend beaucoup aussi en se confrontant à du gratuit qui fonctionne mal, dans la mesure où les défauts rencontrés imposent de se plonger dans le code — mais, comme je vous le disais, dans la mesure où l'on a du temps devant soi (et bien sûr aussi, en l'occurrence, une bonne connaissance de Joomla, plus quelques « bases » en CSS / HTML et PHP).


            Cordialement,




            PhilJ
            Dernière édition par PhilJ à 25/08/2012, 16h50
            Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

            Commentaire


            • #7
              Re : Google Web Fonts avec Gantry

              Oh la honte... pardon je corrige : sur ma faim.

              J'ai quelques bases j'ai fait des stages en début d'année sur joomla 1.7, sur HTML/CSS, sur JavaScript et PHP (4x1semaine).
              Mais le problème c'est que je viens du métier de l'imprimerie (opérateur PAO) et je voudrais personnaliser mon site autant qu'une maquette indesign, alors j’essaie de me contenir... mais pour la typo je trouve que c'est plutôt important donc je fouine.
              Et j'ai envie de mettre en pratique la valeur de mes stages, mais c'est un peu loin ! pas grave de cette façon j'apprends encore.

              Commentaire


              • #8
                Re : Google Web Fonts avec Gantry

                Envoyé par BARRABAN Voir le message
                Oh la honte... pardon je corrige : sur ma faim.
                ...Mais non mais non, c'était juste un lapsus révélateur .

                pour la typo je trouve que c'est plutôt important donc je fouine.
                ...Vous allez y arriver, quitte à faire appel à une extension.



                Bonne continuation,




                PhilJ
                Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                Commentaire


                • #9
                  Re : Google Web Fonts avec Gantry

                  Ah mais n'importe quoi... en fait ça marche très bien le google webfonts sur ce template, mais sur les balises h1,h2 etc.
                  Je pensai que ça changerai la font du menu.
                  Comment je peux changer la police de ACCUEIL CONTACT et autres ?

                  Commentaire


                  • #10
                    Re : Google Web Fonts avec Gantry

                    Bonjour Barraban,


                    Envoyé par BARRABAN Voir le message
                    Comment je peux changer la police de ACCUEIL CONTACT et autres ?
                    ...Comme je vous le suggérais ci-dessus :

                    « installez une extension (en l'occurrence un plugin) permettant d'incorporer la (ou les) police(s) de votre choix, par exemple HD-GFonts ».

                    Activez ensuite le plugin, sélectionnez la police Google Font de votre choix, et spécifiez juste en-dessous la classe CSS des liens de menu (= en l'occurrence probablement la classe '.rt-fusionmenu .menutop', voir ligne 87 de votre template.css).

                    Juste un conseil de plus concernant l'usage des WebFonts. Certaines sont « légères », d'autres moins, d'autres encore sont vraiment très « lourdes » (l'information est donnée par GoogleFont en cliquant 'Quick-use').



                    Cordialement,



                    PhilJ
                    Dernière édition par PhilJ à 27/08/2012, 14h23
                    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                    Commentaire


                    • #11
                      Re : Google Web Fonts avec Gantry

                      La classe CSS c'est ' .menutop'

                      Merci beaucoup, ça s'arrange j'espère pouvoir boucler mon site pour la rentrée.

                      Commentaire


                      • #12
                        Re : Google Web Fonts avec Gantry

                        Envoyé par BARRABAN Voir le message
                        Merci beaucoup, ça s'arrange j'espère pouvoir boucler mon site pour la rentrée.

                        Pas de quoi .


                        Bonne continuation,



                        PhilJ
                        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                        Commentaire

                        Annonce

                        Réduire
                        Aucune annonce pour le moment.

                        Partenaire de l'association

                        Réduire

                        Hébergeur Web PlanetHoster
                        Travaille ...
                        X