Changer les polices d'écriture (Fonts) sur votre boutique Magento

Utilisation et fonctionnement des Fonts

Depuis la venue du style CSS 3, il est possible d'aller plus loin dans la personnalisation de vos pages Web ! L'une des innovations qui nous intéresse est la déclaration dans la feuille de style de l'attribut @font-face. Elle nous permet de déclarer une police d'écriture et de la charger, en toute transparence, sur le navigateur du client.

Son fonctionnement est simple : Au lieu d'utiliser les polices de caractères qui se trouvent sur le PC de l'internaute, nous les chargeons à partir du serveur où se trouve le site web grâce à la feuille de style CSS.

ATTENTION ! Vous n'avez le droit qu'aux polices libres de droit !
Vous en trouverez sur le site Font Squirrel.

Vos propres polices d'écriture sur votre e-boutique Magento

Passons aux choses sérieuses ! Le site Font Squirrel propose un générateur de polices (@font-face Generator), ainsi que des polices prêtes à l'emploi (@font-face Kits).

Dans notre exemple, nous allons utiliser une police "Script" qui se nomme "Black Rose". Rendez-vous donc sur la page @font-face Kits et téléchargez le fichier de police.

Ce fichier est une archive ZIP et contient :

• La police BLACKR-webfont en différents formats (pour la compatibilité entre les différents navigateurs)
• Un fichier html de démonstration ; demo.html
• Une feuille de style CSS ; stylesheet.css

Créez un nouveau répertoire dans votre template de Magento, appelez le "font" et déposez-y les 4 formats de la police.

/skin/frontend/default/VOTRE TEMPLATE/font/BLACKR-webfont.eot *.svg *.ttf *.woff

Ouvrez ensuite votre fichier styles.css qui se trouve dans le répertoire /skin/frontend/default/VOTRE TEMPLATE/css/ et ajoutez-y la déclaration @font-face (le code est disponible dans le fichier stylesheet.css de l'archive ZIP) :

@font-face {
 font-family: 'BlackRoseRegular'; src: url('../font/BLACKR-webfont.eot');
 src: local('☺'), url('../font/BLACKR-webfont.woff') format('woff'), url('../font/BLACKR-webfont.ttf') format('truetype'), url('../font/BLACKR-webfont.svg#webfontOX1lQY4w') format('svg');
 font-weight: normal;
font-style: normal;
}

Cette déclaration nous permet maintenant d'utiliser la valeur 'BlackRoseRegular' pour la propriété "font-family" dans notre feuille de styles "styles.css".

.blackr {
font: 18px 'BlackRoseRegular', Arial, sans-serif;
}

Le résultat en image texte sur le site Line Sane Séduction (site actuellement en développement.)