We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Rajouter nouvelle police ecriture | Forum

Cyril
Cyril Jul 21 '14
Bonjour je voudrais savoir comment rajouter à mon thème des polices d’écriture?

merci d'avance
Norias
Norias Jul 21 '14
salut, 


j'aurais pu répondre simplement:

"En css"


mais ok, j'explique un peu, mais juste un peu car là il faut un cours de css...


Tu peux modifier et ajouter du code css sur la page /admin/theme/css 


Si tu veux modifier la police globalement, il faut agir sur le tag body en lui déclarant une propriété font avec la valeur (nom de la police) que tu veux. Par exemple pour changer en "times", colle le code ci-dessous:
body, html {    font-family: "times";}


Ca c'est la base. 


Ca permet d'afficher le site avec la police que tu as choisie, mais que le navigateur de l'utilisateur doit avoir à sa disposition sur l'ordi de l'utilisateur.

Il faut donc choisir une police courante, que tout le monde possède.


Si l'utilisateur n'a pas la police "times", que ce passe-t-il ? 

Et bien les navigateurs vont afficher le site avec leur police par defaut. A moins que tu en précises une (ou des) alternative à times, en les ajoutant à la suite de "times" séparés par une virgule: 


body, html {    font-family: "times","aria","verdana";}


Mais du coup le choix est limité et pas très original...


Heureusement il est maintenant possible de mettre une police à disposition, que le navigateur va aller chercher pour pouvoir afficher correctement la page, avec la propriété font-face


Elle se déclare dans le code css de cette manière : 


@font-face {    font-family: UneSuperPolice;    src: url(adresse/de/la/police/UneSuperPolice.woff);}


Et maintenant la police UneSuperPolice est disponible pour être déclarée dans le tag que tu veux comme par exemple:


body, html {    font-family: "UneSuperPolice","times","aria","verdana";}


Tous les navigateurs ne supportent pas les mêmes types de fichiers de police :

TTF - Tous sauf IE et iPhone.
EOT - IE seulement. 
WOFF - Compressé, standard à venir. 
SVG - iPhone/iPad.


Alors il faut avoir différentes versions de la police pour pouvoir satisfaire tout le monde :/


Pour ne pas trop se faire chier à trouver le bon chemin relatif vers les fichiers des polices etc... et ne pas utiliser trop de bande passante à chaque upload de la police pour tous les visiteurs, il est possible d'utiliser des services comme google font.

Google fonts est simple à utiliser mais il faut accepter que google sache qui est passé voir quoi et quand sur ton site. C'est google quoi...


Une fois repérée la police désirée, il faut cliquer le bouton "quick use".

Ensuite, à l'étape 3, standard, copie le code proposé genre:

<link href='http://fonts.googleapis.com/css?family=Kalam' rel='stylesheet' type='text/css'>

Et colle le dans la case "en tête personnalisé" sur ta page /admin/settings/page


Google propose à l'étape 4 (Integrate the fonts into your CSS) du code css tout prêt à intégrer dans la balise voulue, à coller sur ta page /admin/theme/css


body, html {    font-family: "Kalam", cursive;}


Et voilà



Cyril
Cyril Jul 22 '14
merci pour ses explications, je vais travailler la dessus un grand merci