Utiliser différentes typographies sur le web grâce à @font-face

Les typographies sont une partie extrêmement importante dans le design de votre interface web. Plusieurs options s’offrent à l’intégrateur ou au programmeur afin d’intégrer une police de caractère non conventionnelle sur le web.

Lorsque je parle d’une typo non conventionnelle, je parle d’une police de caractère autre que celles considérée comme étant 100% compatible à tous les navigateurs pour le web. (Arial, Helvetica, Times New Roman, Times, Courier, Verdana, etc.)

Dans le billet suivant, je vous montrerai les étapes à suivre afin d’intégrer une typographie dans votre page web différente de celles mentionnées plus haut grâce à l’attribut CSS3 font-face.

Utilisation de l’attribut CSS3 @font-face

La technique que j’utilise le plus souvent est celle de l’attribut @font-face puisque je trouve son intégration très rapide, facile et versatile par rapport aux différents fureteurs tant au niveau MAC que PC.

Voici donc les étapes que je vous suggère de suivre lors de l’intégration d’une police de caractère non conventionnelle grâce à font-face.

1- Afin d’intégrer la typographie de votre choix dans un site web, vous devrez utiliser une police de caractère True Type (se terminant par l’extension .ttf) ou OpenType (se terminant par l’extension .otf).

2- Lorsque vous aurez choisi votre typo, je vous recommande d’utiliser le service de conversion de typographies du site Internet fontsquirrel.com. Celui-ci convertira votre fichier typographique en 4 fichiers différents (.eot, .ttf, .svg, .woff).

N.B. : Comme vous pouvez le voir sur l’image ci-dessous, lorsque je convertis une typographie sur ce site web, j’utilise le service «Expert…» afin d’y sélectionner le mode « Bulletproof (Original) ». Ce mode me permet d’utiliser @font-face également lorsque je programme et intègre un site web en local.

3- Lorsque vous aurez téléchargé le fichier .zip que font-squirrel vous fournira, celui-ci devrait contenir un ensemble de 6 fichiers : 1 fichier .css (feuille de style), 1 fichier .html ainsi que 4 fichiers de typographies (.eot, .svg, .ttf, .woff).

Copiez le code de la feuille de style et intégrez-le à votre fichier CSS. Copiez-collez les fichiers de typographie vers votre dossier images.

N.B. N’oubliez pas d’ajuster l’URL des fichiers de typographies dans la déclaration de l’attribut font-face.

Par exemple, si ma feuille de style se trouve dans un dossier appeler « css » situé à la racine de mon site web et que les fichiers de typographie se trouvent dans un dossier appelé « typographies » situé dans le dossier « images » lui aussi situé à la racine de mon site web, voici à quoi ressemblera le code utilisé pour la déclaration de l’attribut font-face :

@font-face {
	font-family: 'GeomancyExtraBold';
	src: url('../images/typographies/geomancy_-_extra_bold-webfont.eot');
        src: local('../images/typographies/Geomancy'), local('../images/typographies/GeomancyExtraBold'),
        url('../images/typographies/geomancy_-_extra_bold-webfont.woff') format('woff'),
        url('../images/typographies/geomancy_-_extra_bold-webfont.ttf') format('truetype'),
        url('../images/typographies/geomancy_-_extra_bold-webfont.svg#webfontbtLDz6sx') format('svg');
        font-weight: normal;
	font-style: normal;
}

Vous pourrez par la suite déclarer la propriété suivante à la balise texte désirée.

h1 {
	font-family: 'GeomancyExtraBold', Verdana, Arial, sans-serif;
}

Quelle technique utilisez-vous afin d’intégrer une police de caractère différente de celles compatibles par défaut avec les différents fureteurs?

vectorSKIN | 2010/10/03

Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

A noter pour les iPhones qu’il faut utiliser le format SVG pour que cela fonctionne.

Louis-Philippe Dea | 2010/10/03

Merci pour la précision. Connais-tu l’utilité du format SVNZ?

Valérie | 2010/11/22

J’ai essayé la technique du @font-face et ça ne semble pas supporter les caractères accentués… y a-t-il une astuce pour que ça les supporte? J’ai utilisé les kits tout fait de fontsquirrel. La font semble supporter les caractères accentués puisque quand je fais un test mon « é » s’affiche dans la font.

Apparemment les fonts que j’ai testées supportaient « faussement » les accents.. après avoir essayées plusieurs fonts différentes j’en ai trouvé plusieurs qui supportaient bien les accents.

Louis_Dea | 2010/11/22

Salut Valérie, oui en effet, ton problème était probablement dû à l’utilisation du typo qui ne supportait pas à la base les caractères accentués puisque font-face intègre à merveille cette fonctionnalité. 😉

Philippe Poisson | 2011/03/09

est-ce que cela fonctionne bien avec tout les browser?

Louis-Philippe Dea | 2011/04/05

Salut Philippe, désolé pour le délai de ma réponse. Oui cette fonctionnalité est compatible avec tous les navigateurs, IE 7 – 8 -9 , Safari, Firefox, Chrome, Opera, Name it…

J’ai cependant remarqué parfois un petit glitch avec Firefox. Quelqu’un serait au courant de ce qui pourrait causer ce léger problème?

Jérémy Taktouk | 2011/07/11

Hello,
J’ai un problème avec font face :
Comment uploader plusieurs style de typo d’une même famille ?
exemple :

Je souhaite intégrer une FuturastdLight avec une futurastdBookOblique et une futurastdBook, lorsque je fais mon font face, il ne repère qu’un seul type de police…

Pourquoi ?

voici ma css :

@font-face {
font-family: ‘FuturaStdMedium’;
src: url(‘futurastd-medium-webfont.eot’);
src: url(‘futurastd-medium-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘futurastd-medium-webfont.woff’) format(‘woff’),
url(‘futurastd-medium-webfont.ttf’) format(‘truetype’),
url(‘futurastd-medium-webfont.svg#FuturaStdMedium’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘FuturaStdBook’;
src: url(‘futurastd-book-webfont.eot’);
src: url(‘futurastd-book-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘futurastd-book-webfont.woff’) format(‘woff’),
url(‘futurastd-book-webfont.ttf’) format(‘truetype’),
url(‘futurastd-book-webfont.svg#FuturaStdBook’) format(‘svg’);
font-weight: normal;
font-style: normal;

@font-face {
font-family: ‘FuturaStdBookOblique’;
src: url(‘futurastd-bookoblique-webfont.eot’);
src: url(‘futurastd-bookoblique-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘futurastd-bookoblique-webfont.woff’) format(‘woff’),
url(‘futurastd-bookoblique-webfont.ttf’) format(‘truetype’),
url(‘futurastd-bookoblique-webfont.svg#FuturaStdBookOblique’) format(‘svg’);
font-weight: normal;
font-style: normal;

@font-face {
font-family: ‘FuturaStdLight’;
src: url(‘futurastd-light-webfont.eot’);
src: url(‘futurastd-light-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘futurastd-light-webfont.woff’) format(‘woff’),
url(‘futurastd-light-webfont.ttf’) format(‘truetype’),
url(‘futurastd-light-webfont.svg#FuturaStdLight’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Louis_Dea | 2011/07/13

Salut Jérémy, très bonne question. À vrai dire, je n’ai jamais ce genre de problème et j’ai souvent intégré tel que tu l’as « posté » dans le dernier commentaire différentes typographies de la même famille dans le même site et dans le même CSS.

Voici un exemple que j’ai copier d’un site que je viens justement d’intégrer en espérant que ça pourra t’aider :

@font-face {
font-family: ‘AvenirLTStd95Black’;
src: url(‘typos/avenirltstd-black-webfont.eot’);
src: local(‘typos/Avenir LT Std’), local(‘typos/AvenirLTStdBlack’), url(‘typos/avenirltstd-black-webfont.woff’) format(‘woff’), url(‘typos/avenirltstd-black-webfont.ttf’) format(‘truetype’), url(‘typos/avenirltstd-black-webfont.svg#webfontYmGbvQj5’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘AvenirLTStd35Light’;
src: url(‘typos/avenirltstd-light-webfont.eot’);
src: local(‘typos/Avenir LT Std’), local(‘typos/AvenirLTStdLight’), url(‘typos/avenirltstd-light-webfont.woff’) format(‘woff’), url(‘typos/avenirltstd-light-webfont.ttf’) format(‘truetype’), url(‘typos/avenirltstd-light-webfont.svg#webfontIz0Q704F’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

JHN | 2011/12/18

@ Valérie :
J’ai vécu la même expérience, visiblement les kits tous faits sont souvent paramétrés pour ne pas intégrer les accents.
La meilleur solution est d’utiliser les générateur de font squirrel avec une police ttf préalablement téléchargée :

mode -> expert
Subsetting -> Custom Subsetting
Character Type -> lower accents et upper accents
Language -> French
Unicode Tables -> Basic Latin

et voila…
Cela permet d’avoir les accents sans les inconvénients de fichiers énormes contenant le cyrillique par exemple…

Cannelle | 2011/12/22

bonjour je ne comprend pas pour quoi s’affiche pas sur mozzilla ! Merci de me donner quelque solution .

guillaume | 2012/01/12

Bonjour,

Tout comme Valérie j’ai essayé la technique du @font-face et ça ne semble pas supporter les caractères accentués, j’ai essayer un bon nombres de police… mais rien y fait… pourriez vous me donner le nom des polices qui fonctionne, histoire de gagner du temps.

Merci d’avance,

Louis_Dea | 2012/01/16

Salut Guillaume,

Personnellement, il est très rare que j’obtienne une typographie web qui ne supporte pas les accents. Peut-être 1 fois sur 10.

Peut-être est-ce ta typographie initiale .otf ou .ttf (avant de l’avoir passée dans la machine à convertir les fonts) qui est à l’origine du problème?

Guillaume | 2012/01/17

Salut,

Merci pour ta réponse,

Bein je n’y arrive toujours pas…C’est dommage parce que ça marche bien, c’est juste ces accents qui foire tout…

En faite les accents s’affiche mais pas dans le style de la police choisie,

Donc je sais pas…

halima | 2012/11/28

svp je suis besoin de fichier d’extension otf ou ttf qui désigne le font utilisé par facebbok

Elisa | 2012/12/29

J’ai un problème moi aussi. Je débute en web, donc je ne capte pas toujours toutes les subtilités du code. Chez moi le kit ne marche pas, sur un autre ordi qui ne possède pas mes typos, celles-ci ne s’affichent pas (j’ai droit aux typos par défaut : times, helvetica etc.)
J’ai juste collé ceci dans ma css :
@font-face {
font-family: ‘AmaticSCRegular’;
src: url(‘AmaticSC-Regular-webfont.eot’);
src: url(‘AmaticSC-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘AmaticSC-Regular-webfont.woff’) format(‘woff’),
url(‘AmaticSC-Regular-webfont.ttf’) format(‘truetype’),
url(‘AmaticSC-Regular-webfont.svg#AmaticSCRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

@font-face {
font-family: ‘AmaticBold’;
src: url(‘amatic-fontfacekit/Amatic-Bold-webfont.eot’);
src: url(‘amatic-fontfacekit/Amatic-Bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘amatic-fontfacekit/Amatic-Bold-webfont.woff’) format(‘woff’),
url(‘amatic-fontfacekit/Amatic-Bold-webfont.ttf’) format(‘truetype’),
url(‘amatic-fontfacekit/Amatic-Bold-webfont.svg#AmaticBold’) format(‘svg’);
font-weight: normal;
font-style: normal;

@font-face {
font-family: ‘quicksand_bookregular’;
src: url(‘webfontkit-20121229-174625/quicksand_book-webfont.eot’);
src: url(‘webfontkit-20121229-174625/quicksand_book-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘webfontkit-20121229-174625/quicksand_book-webfont.woff’) format(‘woff’),
url(‘webfontkit-20121229-174625/quicksand_book-webfont.ttf’) format(‘truetype’),
url(‘webfontkit-20121229-174625/quicksand_book-webfont.svg#quicksand_bookregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

(j’ai juste modifié le code afin que le dossier dans lequel les typos se trouvent soient bons)

Est-ce qu’il faut écrire quelque chose dans le code html également ?
Merci d’avance pour l’aide (et pour le tuto) !

Incest | 2024/07/26

This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of « neighbors » will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune « Social » is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.

Utiliser différentes typographies sur le web grâce à @font-face

Utilisation de l’attribut CSS3 @font-face

Mises à jour par courriel

Nos articles les plus populaires

17 commentaires

vectorSKIN | 2010/10/03

Louis-Philippe Dea | 2010/10/03

Valérie | 2010/11/22

Valérie | 2010/11/22

Louis_Dea | 2010/11/22

Philippe Poisson | 2011/03/09

Louis-Philippe Dea | 2011/04/05

Jérémy Taktouk | 2011/07/11

Louis_Dea | 2011/07/13

JHN | 2011/12/18

Cannelle | 2011/12/22

guillaume | 2012/01/12

Louis_Dea | 2012/01/16

Guillaume | 2012/01/17

halima | 2012/11/28

Elisa | 2012/12/29

Incest | 2024/07/26

Laisser un commentaire

Inspiration web

Inspiration design