Google Web Fonts avec Gantry

**PhilJ** · 25/08/2012, 03h18

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

**BARRABAN** · 25/08/2012, 11h27

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");

**PhilJ** · 25/08/2012, 15h47

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

**BARRABAN** · 25/08/2012, 16h17

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.

**PhilJ** · 25/08/2012, 16h46

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

**BARRABAN** · 25/08/2012, 17h00

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.

**PhilJ** · 25/08/2012, 17h12

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

**BARRABAN** · 27/08/2012, 12h53

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 ?

**PhilJ** · 27/08/2012, 14h17

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

**BARRABAN** · 29/08/2012, 14h12

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.

**PhilJ** · 29/08/2012, 15h33

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

Google Web Fonts avec Gantry

Google Web Fonts avec Gantry

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association