Donnez du style à vos titres
Rédigé par jack
17 commentaires
Classé dans : PluXml
É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.
- 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;
}
font-family: 'desyrelregular';
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');
É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;
}
body > header h1 {
font-family: 'desyrelregular';
font-size: 2.2em;
margin: 0;
}
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;
}
article h1,
article h1 a {
font-family: 'desyrelregular';
color: #444;
font-weight: bold;
line-height: 1.1;
margin: 0;
}
Résultat obtenu après utilisation d'une webfont
