Utiliser une fonte personnalisée avec Cufón

Sat, 19 Dec 2009 00:53:19 +0000

Dans un précédent billet j’avais mentionné Cufón et sIFR, comme moyen d’utiliser des polices personnalisées sur nos sites Internet, de bonnes alternatives à la propriété CSS3 @font-face qui n’est pas prise en compte par tout les navigateurs web. Aujourd’hui je vais vous montrer comment utilisé vos polices d’écriture préférées sur votre site Web en utilisant Cufón.

Qu’est-ce que c’est Cufón ?

Cufón est un simple fichier Javascript qui se charge de remplacer n’importe quel texte par une image en utilisant la police de votre choix. Cufón est aussi une très bonne alternative à sIFR, qui fait exactement la même chose mais est beaucoup plus lourd et moins facile à configurer.

Comment le mettre en oeuvre ?

Téléchargement du script de remplacement

La première étape à effectuer pour pouvoir utiliser Cufón, c’est bien entendu de télécharger le fameux fichier disponible à cette adresse.

Conversion de notre police

Ensuite, nous allons devoir générer un fichier Javascript qui ne contiendra ni plus ni moins que les information de notre police, pour cela, le site de Cufón dispose d’un générateur de police dans lequel on va pouvoir télécharger le(s) fichier(s) de notre police.

On devra ensuite choisir quels lettres et symboles inclure dans notre fichier généré, et d’autres options facultatives. Une fois les conditions d’utilisation acceptées, un petit clique sur le bouton de validation et l’on pourra télécharger notre police d’écriture converti au format JavaScript.

Voilà, on a déjà fait le plus gros du travail. Éprouvant non? ^^

Installation de Cufón

Ouvrez bien les yeux ça va aller vite maintenant, vous n’avez qu’a inclure le code suivant entre vos balises :


	
	 //le script Cufon
	 //notre police converti

Et c’est terminé tous les élément H1 utiliseront notre police personnalisée! Simple non?

3 façons d’utiliser une police d’écriture « exotique » sur un site Web

Sat, 17 Oct 2009 16:04:13 +0000

Dans ce nouvel article, nous allons voir comment utiliser une police d’écriture dite éxotique, c’est à dire qui n’est normalement pas destinée à une utilisation sur le Web.

D’abord, quelles sont les polices d’écriture ou fonts en anglais utilisées généralement sur Internet?

Eh bien il n’y en a pas une dizaine! En effet, lorsqu’on parcours un peu le Web on se rend compte que les polices utilisées sont le plus souvent Times New Roman, Times, Helvetica, Verdana, Arial et Trebuchet, et ceci pour une bonne raison : ce sont toutes des polices intégrées d’origine dans nos ordinateurs, que ce soit Mac ou PC.

Maintenant, qu’est-ce qu’une font exotique?

Une police d’écriture exotique ce sont toute les fonts que l’on peut trouvées en téléchargement sur des sites comme le très connu Dafont.com qui propose de nombreuse polices en tout genre à installé sur l’ordinateurs. C’est d’ailleur une très bonne ressource pour les designer web et autre graphiste car ces polices permettent de diversifier nos travaux. La police que j’utilise d’ailleurs pour les titres de mes articles est la font Qlassik disponible gratuitement sur sur Dafont.

Maintenant qu’on sait çà, voyons voir comment l’utiliser sur nos sites Internet.

Comment utiliser une police exotique sur Internet?

Il faut savoir qu’il y a plusieurs façon de mettre en oeuvre une telle police sur un site Internet, notament en utilisant Javascript, Flash, les CSS3, ou encore une image.

Commençons d’abord par la methode la plus simple à mettre en place, mais pas forcement la plus pratique : l’utilisation d’images

1ère methode :Remplacer du texte par une image avec les CSS

Il faut savoir que cette technique n’est pas adaptée suivant l’utilisation qu’on en fait. En effet, cette technique est utile pour par exemple remplacer le titre de notre site par notre logo. Au contraire, utiliser ce procédé pour remplacer le titre des articles d’un blog est une chose vraiment fastidieuse et demandant vraiment trop de travail.

Ici sur AngeChierchia.com le logo est enfait une balise

avec un identifiant afin de stylisé le texte entre les balises

et

, dont voici le CSS :

h1#logo {

background-image:url(images/logo.png);

background-repeat:no-repeat;

width:368px; height:84px;

display:block;

float:left;

text-indent:-999px;

border:none;

}

Les propriétés importantes ici, sont background-image qui permet de mettre une image de fond, width et height qui permettent de dimensionner la zone de notre H1, et text-indent: qui permet de dire à notre balise H1 que le texte qu’elle contient doit être indenté, ici le texte sera décalé de 999 pixels à gauche donc non visible.

2ème methode : remplacer du texte en utilisant Javascript et Cufón ou Flash et sIFR

La seconde methode est celle qui est le plus répendue actuellement, on l’appelle aussi Advanced Image Remplacement (remplacement par l’image avancé). Ici on utilise plus du tout CSS et une image, mais plutot Javascript si on choisi d’utiliser le script Cufón, ou encore Flash si on utilise sIFR.

Ici, je ne vais pas vous montrer comment utiliser sIFR ou Cufón, on verra çà dans un prochain article. Sachez juste que sur ce blog j’utilise Cufón pour styliser mes balises h1, h2 et h3.

3ème methode : la règle @font-face de CSS3

Bien que cette methode soit la plus récente et la plus simple à mettre en place, certaines polices ainsi que certain type de fichier ne sont pas bien supporté. Pour utiliser notre police on doit donc d’abord la déclarer dans notre feuille de style en utilisant la règle @font-face qui permet de dire à notre site d’utilisé la police se trouvant à tel endroit sur notre serveur. En quelque sort c’est l’équivalent de la propriété background-image.

Une fois la police déclarée, on pourra l’utilisé avec la propriété font-family.

@font-face { //on déclare notre police

font-family: "Qlassik";

src : url("chemin/vers/Qlassik.otf");

}

h1 { //on utilise notre police pour tous les élément h1

font-family: "Qlassik", helvetica, arial;

font-size: 24px;

}

font - Ange Chierchia