Donnez du style à vos titres

Rédigé par jack le 30 octobre 2013 17 commentairese

Envie de changer la police de caractère utilisée pour votre titre en remplaçant les classiques Arial, Helvetica ou autre Serif par une fonte plus attrayante ? Je vous propose de mettre en place des webfonts dans le thème de votre PluXml pour personnaliser l'apparence des titres.

Étape 1: Trouver la fonte de son choix

Les sites pour trouver des fontes, généralement au format ttf, sont nombreux. Voici deux liens qui proposent de nombreuses polices à télécharger.

Étape 2: Convertir la police ttf aux formats pour le web

Le format ttf ne suffit pas pour être utilisé sur un site web car tous les navigateurs ne reconnaissent pas ce format. Il faut donc passer par un outil de convertion qui créera les fichiers et formats manquants. Après avoir récupéré la fonte de votre choix au format .ttf, je vous propose d'utiliser l'outil de conversion disponible sur le site fontsquirrel: Webfont Generator.

Son utilisation est très simple:

Cliquez sur le bouton "Add Fonts" et sélectionnez votre fichier .ttf
Laissez l'option par défaut "Optimal" sélectionnée
Cochez "Yes, the fonts I'm uploading are legally eligible for web embedding"
Cliquez sur le bouton "DOWNLOAD YOU KIT"

Étape 3: Copier les fichiers dans votre PluXml

Créez un dossier fonts dans le dossier de votre thème, pour obtenir par exemple:


/themes/defaut/fonts

Note: defaut correspond au nom du thème par défaut de PluXml. Après avoir téléchargé et décompressé le fichier généré par l'outil de conversion (voir étape 2), récupérez tous les fichiers avec les extensions .eot, .svg, .tff et .woff et copiez les dans le dossier fonts créé précedemment.

Étape 4: Déclaration des fontes dans la feuille de style de PluXml

Dans le dossier qui contient les fichiers des polices après la décompression de l'archive téléchargée, il y a aussi un fichier stylesheet.css. Éditez ce fichier et récupérez les lignes de code présentes. Faites un copier-coller de ces lignes au début du fichier style.css de votre thème dans /themes/defaut/style.css. Elles correspondent aux instructions à ajouter dans le feuille de style du thème de PluXml pour utiliser les nouvelles fontes.

Exemple de code à copier:


@font-face {
    font-family: 'desyrelregular';
    src: url('fonts/desyrel-webfont.eot');
    src: url('fonts/desyrel-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/desyrel-webfont.woff') format('woff'),
         url('fonts/desyrel-webfont.ttf') format('truetype'),
         url('fonts/desyrel-webfont.svg#desyrelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Notez ici le nom de la police à identifier sur la ligne suivante


    font-family: 'desyrelregular';

Notez également l'emplacement des fichiers .eot, .woff, .ttf et .svg dans le dossier fonts

Exemple: le fichier desyrel-webfont.eot est stocké dans le dossier fonts (chemin relatif par rapport au fichier style.css du thème de PluXml)


    src: url('fonts/desyrel-webfont.eot');

'desyrelregular' après l'instruction font-family est le nom de la nouvelle police de caractère.

Étape 5: Personnalisation des titres de PluXml avec la nouvelle police de caractère

Il ne reste plus maintenant qu'à changer la police de caractère utilisée pour les titres de PluXml que vous voulez changer. Ici les cas de figure peuvent être différents en fonction de votre thème actuel car le fichier de style style.css ne sera pas le même en fonction des thèmes. A titre d'exemple je vais prendre le thème par défaut de PluXml (version 5.2 au moment de la rédaction de cet article). Cela vous donnera des indications pour modifier votre propre thème.

Pour modifier la police du titre du site, éditez le fichier themes/defaut/style.css et remplacez le code suivant


body > header h1 {
	font-size: 2.2em;
	margin: 0;
}

par


body > header h1 {
	font-family: 'desyrelregular';
	font-size: 2.2em;
	margin: 0;
}

Ici la déclaration de la police 'desyrelregular' est ajoutée grâce à l'instruction font-family.

Pour modifier la police du titre des articles, éditez le fichier themes/defaut/style.css et remplacez le code suivant


article h1,
article h1 a {
	color: #444;
	font-weight: bold;
	line-height: 1.1;
	margin: 0;
}

par


article h1,
article h1 a {
	font-family: 'desyrelregular';
	color: #444;
	font-weight: bold;
	line-height: 1.1;
	margin: 0;
}

Ici aussi la ligne font-family: 'desyrelregular'; permet de spécifier la fonte à utiliser.

Résultat obtenu après utilisation d'une webfont

De la même façon, maintenant vous pouvez définir le style des titres de niveau <h2>, <h3>, voir même du texte utilisé pour le chapo ou le contenu des articles.

DClassé dans : PluXml ,Mots clés : PluXml, Thème, Webfont, Tuto, Css

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

17 commentaires

vendredi 01 novembre 2013 @ 11:18 jerrywham a dit : #1

Quelques ch'tites fautes de conjugaison : "Après avoir télécharger et décompresser" -> "Après avoir téléchargé et décompressé".

Merci pour ces rappels.

samedi 02 novembre 2013 @ 16:10 Chriss... a dit : #2

Bonjour,
on peut aussi utiliser les fontes Google : http://www.google.com/fonts
facile d,utilisation, pas besoin de télécharger sur son site (gain de place), pas besoin de les convertir, surtout que certaines polices détestent cela... :-(

mercredi 06 novembre 2013 @ 14:28 Stéphane a dit : #3

@jerrywham :
Merci Jerry, c'est corrigé.

samedi 07 décembre 2013 @ 22:51 attavik a dit : #4

Bonjour,rien à voir mais il faudrait peut être mettre un captcha sur les commentaires non? Où autre chose est prévu pour contre les spams?

dimanche 08 décembre 2013 @ 08:43 Stéphane a dit : #5

@attavik :
Les commentaires sont contrôles par akismet + un autre plugin maison et ils sont modérés avant publication

samedi 16 avril 2016 @ 14:38 Norore a dit : #6

Bonjour.
Merci beaucoup, je suis en train de faire mon propre thème sur PluXML et ce tutoriel tombe à point nommé pour moi !
Il est très clair et bien expliqué, grâce à vous j'ai maintenant de jolis titres :) !

vendredi 30 septembre 2016 @ 14:26 noidee a dit : #7

Bonjour,
Cet article est très intéressant.
Néanmoins j'utilise pluxml 5.5 et je n'est pas de fichier style.css dans mon themes/defaut/ ???
Je n'arrive donc pas à transposer cette solution... sur cette version de pluxùml.
Une petite aide serait bienvenue.
En vous remerciant par avance,
Bien cordialement.

vendredi 30 septembre 2016 @ 14:33 Stéphane a dit : #8

Bonjour. Regardez dans le dossier css de votre thème

vendredi 30 septembre 2016 @ 14:44 noidee a dit : #9

Merci pour votre rapidité !!!
dans le dossier css du theme j'ai deux fichiers :
plucss.css,
theme.css.
mais je ne vois pas trop à quel endroit je dois rajouter les lignes...

vendredi 30 septembre 2016 @ 17:29 Stéphane a dit : #10

C'est dans le fichier theme.css qu'il faut rajouter le code, par exemple à la fin du fichier

vendredi 30 septembre 2016 @ 17:43 noidee a dit : #11

Merci pour votre réponse, je vais tester ça

mardi 03 janvier 2017 @ 22:07 higuma a dit : #12

Bonjour, pourriez-vous me dire si ces modifications sont valables pour les titres des pages statiques, et si oui, à quel endroit faut-il opérer ? Merci :)

mercredi 04 janvier 2017 @ 08:00 Stéphane a dit : #13

Bonjour. Oui la méthode est identique. Les règles css pour les articles devraient également fonctionner pour les titres des pages statiques.

samedi 07 janvier 2017 @ 22:56 higuma a dit : #14

arf :) j'ai enfin trouvé ! : dans le fichier plucss.css :

/* NAVIGATION
------------------------------ */

.menu {
font-size: 0rem;
margin: 0;
padding-left: 0;
}
.menu li {
display: inline-block;
font-family: 'ma police ici';
font-size: 1rem;
list-style-type: none;
margin-left: 1rem;
}

Par contre pour la couleur de la police, c'est ici aussi qu'il faut mettre le code ? et quel est-il ?

lundi 09 janvier 2017 @ 08:59 Stéphane a dit : #15

Bonjour. Il vaut mieux mettre le code dans le fichier theme.css plutôt que dans plucss.css
Pour la couleur, quelque chose de ce genre devrait fonctionner. (avec le code couleur de votre choix)

article h1,
article h1 a {
color: #ff0000;
}

vendredi 09 février 2018 @ 22:17 Framboisier a dit : #16

Bonjour et merci beaucoup pour vos tutoriels, dont celui sur l'image à la place du bandeau, que j'ai immédiatement mis à profit.
Mon étape actuelle: absolument changer la fonte des titres des articles! Pourtant je n'y arrive pas, qqchose coïnce qqpart, mais où ?
J'ai d'abord essayé KaushanScript sous tous les angles, et comme ça ne passait pas, j'ai essayé avec desyrelregular comme votre tuto, mais y veut pas (sauf la nouvelle couleur qui passe!): j'ai fait:

/* ---------- Main ---------- */

@font-face {
font-family: 'desyrelregular';
src: url(../fonts/'desyrel-webfont.woff2') format('woff2'),
url(../fonts/'desyrel-webfont.woff') format('woff');
url(../fonts/'desyrel.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.main {

.....et.....

.article header h2 a {
font-family: 'desyrelregular';
color: #68a9ed;
}
.article header h2 a:hover {
font-family: 'desyrelregular';
color: #258fd6;
text-decoration: none;
}

NB: - j'ai aussi essayé avec le chemin écrit sous la forme: url(fonts/'desyrel...
- les fichiers .ttf et .woff sont bien dans /fonts qui se trouve dans /defaut, à côté de /css.

Voyez-vous mon erreur? Pouvez-vous m'orienter vers la solution? Merci d'avance pour votre attention.
Framboisier

mardi 13 février 2018 @ 23:26 Framboisier a dit : #17

Rebonjour,
ce petit mot juste pour vous dire que mon problème de fontes qui ne passaient pas est solutionné. Gzyg a repéré les deux microscopiques erreurs de syntaxe que j'avais faites. Merci pour ce PluXml et tous vos tutoriels !

rFil RSS des commentaires de cet article

Les commentaires sont fermés.