[RÉGLÉ] jolie police

[pjuignet]

Bonsoir à tous,

J'essaye des polices différentes sur mon site philosciences.com.

En ce moment j'ai mis Lato de Google. Mais je n'arrive pas à avoir la version légère dans mes paragraphes.
Voici le code que j'utilise:

body {
	margin: 0;
	font-family: Lato;
        font-size: 1em;
	line-height: 1.5em;
	color: #333;
	background-color: #fff;
}

h1 {
    font-size: 2.1em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

p {
    font-size: 1.1em;
    font-weight: thin;
}

font-weight ne marche ni avec "thin" ni avec "lighter" ni avec "100".

[messinmaisoui]

Re : jolie police

Probablement une autre règle css qui empêche le font-weight de faire son office ...
Un exemple (parmi tant d'autres) d'explication : http://www.coursweb.ch/css/cascade.html

[pmleconte]

Re : jolie police

Bonjour,

A la place de Lato, essayez Lato Light. https://www.google.com/fonts#UsePlac...ollection:Lato

Pascal

[pjuignet]

Re : jolie police

@Pascal : Lato Light n'est par reconnu.

@messinmaisoui : j'ai essayé "! important" pour imposer font-weight mais ça ne marche pas.

Le problème de Joomla, c'est qu'il est très compliqué.

[messinmaisoui]

Re : jolie police

@messinmaisoui : j'ai essayé "! important" pour imposer font-weight mais ça ne marche pas.

Tester/retester déjà :

font-weight: 100;

puis

font-weight: 100 !important;

[pjuignet]

Re : jolie police

J'ai essayé toutes les combinaisons et rien ne marche. MAIS ça ne vient peut être pas de Joomla, mais plutôt des navigateurs qui enregistrent bien la commande font-weight (elle est notée sur le code source de la page) mais ne la traduisent pas.
J'ai essayé sur Firefox, Chrome et Edge : même résultat.

Merci à tous je laisse tomber ; mon Lato standard n'est pas idéal, mais pas mal quand-même.

[PhilJ]

Re : jolie police

Bonjour,

Le problème de Joomla, c'est qu'il est très compliqué.

Vous rencontreriez exactement le même problème avec n'importe quel autre CMS. Le souci n'a pas son origine dans Joomla mais dans votre appel de la police Lato depuis les Google Fonts.


Explication :

[...] En ce moment j'ai mis Lato de Google. Mais je n'arrive pas à avoir la version légère dans mes paragraphes.

Actuellement, votre site appelle Lato de cette façon, comme si Lato était une seule et même police de caractères :



—

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato" />

Ce n'est pas le cas : chaque variante de cette famille de police (= 100, 300, 400, 700... + normal et italique) est une police. Idem pour les versions italiques.

=> Si par exemple vous comptez utiliser Lato à la fois en version ultra-light (= 100, attention : peu lisible sur nombre d'écrans) + light (= 300), + « normal » (= 400) + gras (= 700), votre appel de Lato devrait être :
—

<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>

Ou bien, si vous avez besoin des italiques (= de tous les italiques) :
—

<link href='https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,400,40 0italic,700,700italic' rel='stylesheet' type='text/css'>

Attention : plus vous appelez de polices et de variantes de polices, plus le poids de vos pages augmente et donc plus votre site est ralenti.

[pjuignet]

Re : jolie police

Bonjour PhilJ

Oui j'ai compris, il ne s'agit pas de variantes d'une même police mais de polices différentes.

Où faut il noter les appels de police dans protostar ?

Dans le fichier index.php il y une partie :

// Use of Google Font
if ($this->params->get('googleFont'))
{
	$doc->addStyleSheet('//fonts.googleapis.com/css?family=' . $this->params->get('googleFontName'));
	$doc->addStyleDeclaration("
	h1, h2, h3, h4, h5, h6, .site-title {
		font-family: '" . str_replace('+', ' ', $this->params->get('googleFontName')) . "', sans-serif;
	}");
}

????

[PhilJ]

Re : jolie police

Où faut il noter les appels de police dans protostar ?

Personnellement je n'applique jamais d'altérations dans les templates (ni, dans la mesure du possible, dans les extensions) car les mises à jour les écrasent. Ici, étant donné que Protostar est un template par défaut de Joomla, toute mise à jour de Joomla risque d'écraser vos modifications.

Au lieu de cela, j'injecte tous les codes d'appel (à des fichiers CSS, JavaScript et fontes Google) via un plugin.

Un qui marche très bien : 'Head and Body' (http://www.openpotion.com/website-de...oomla/#plugins). De cette façon, le template reste rigoureusement intact.

[pjuignet]

Re : jolie police

C'est vrai, j'ai ce bête réflexe de griffonner directement sur le code source.

J'ai installé Head and Body et il marche bien.

Mes articles ont donc droit à la jolie police Lato 300.

Merci.

[PhilJ]

Re : jolie police

Parfait, et vous allez pouvoir passer ce fil de discussion en 'RÉGLÉ'. Cependant je vous conseille de regarder le code source de vos pages (CTRL+U) car vous appelez Lato à deux reprises, donc une fois de trop :
—

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato" />

et, juste avant la fermeture </head> :
—

<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>

=> Vous devriez faire en sorte de supprimer le premier appel, le second — injecté avec 'Head & Body' — étant plus précis et largement suffisant.

[pjuignet]

Re : jolie police

Effectivement, mais je ne sais pas ce qui génère le premier appel.
Je ne me souviens pas de l'avoir écrit. Il est peut-être d'office dans protostar ?

[ghazal]

Re : jolie police

Salut,
quand une police google me casse les pieds, j'utilise l'option via le fichier CSS, cad :
@import url(https://fonts.googleapis.com/css?fam...,300,700,900);

A placer dans un fichier user.css que tu auras créé et nommé ainsi.

Ce fichier est appelé par défaut dans index.php de Protostar, ligne +-85 :

if (file_exists($userCss) && filesize($userCss) > 0)
{
$this->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/user.css');
}

Exemple, dans user.css :

@import url(https://fonts.googleapis.com/css?fam...,300,700,900);
body{font-weight: 300;font-size: 1em;line-height: 1.3em;}

Sur FF pour Mac, la font-weight à 100 n'est pas très visible, je l'ai mise à 300.

[PhilJ]

Re : jolie police

Bonjour,

Effectivement, mais je ne sais pas ce qui génère le premier appel.

Il est assez probable que ce soit dans Extensions > Templates > Protostar, onglet 'Paramètres avancés', champ 'Nom de police Google'.

[pjuignet]

Re : jolie police

@PhilJ vous connaissez bien Joomla ; j'avais effectivement mis Lato dans les paramètres avancés concernant les titres, mais j'avais oublié. Du coup je vais le laisser et mettre la police Georgia pour le corps de texte l'ensemble donnant quelque de très lisible sans être vieillot.

@ghazal je vais noter ce bout de code pour m'en servir au besoin, merci.