[Article] Police personnalisée sur un site Web

[zoom61]

Bonjour,

Voici un article sur : Comment utiliser une police personnalisée sur un site Web ?

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

Comment utiliser une police personnalisée sur un site Web ?

[jreaux62]

Bonjour,
FontSquirrel est en effet un excellent générateur de polices.

Mais... pourquoi ne pas parler :

• des polices Google (Google Web Fonts) ?
• ou des adresses de sites proposant des polices (dafont, ffonts, ... ), en notant leurs qualités/défauts (éventuellement) ?

Ca permettrait de centraliser toutes les infos disponibles dans un même article/tutoriel.

[Muchos]

Ou les Edge web fonts d'Adobe.

[zoom61]

Salut,

Envoyé par wallas07

Bonjour, ces polices sont-elles supporter par tout les navigateurs ?

Dans le second paragraphe, je donne pour chaque navigateur les versions qui l'acceptent : ici, et tu peux constater qu'il y en a beaucoup.

@+.

[zoom61]

Envoyé par jreaux62

Bonjour,
FontSquirrel est en effet un excellent générateur de polices.

Mais... pourquoi ne pas parler :

• des polices Google (Google Web Fonts) ?
• ou des adresses de sites proposant des polices (dafont, ffonts, ... ), en notant leurs qualités/défauts (éventuellement) ?

Ca permettrait de centraliser toutes les infos disponibles dans un même article/tutoriel.

Envoyé par Muchos

Ou les Edge web fonts d'Adobe.

Il a fallu faire un choix , il est peut-être critiquable, mais FontSquirrel est service très simple qui permet à la fois de récupérer des polices gratuites et surtout de permettre la génération de sa police. Car il ne faut pas oublier que cet article est destiné à tout public.

Pour ce qui est des sites qui donnent que les polices (dafont.com, FFONTS), je ne fais pas la promotion des polices, pour que tout le monde installe sa police personnalisée sur son site, je fournis seulement le mode d'emploi pour l'installer sur son site...

Quant au produit Adobe, ils n'ont jamais rien fait gratuitement, j'ai peut-être tort (même sûrement).

Merci de vos remarques, je les note pour une éventuelle mise à jour de l'article.

@+.

[jreaux62]

OK pour ne pas parler des sites de polices (il suffit d'une recherche Google pour les trouver).
Par contre :

Envoyé par jreaux62

Mais... pourquoi ne pas parler :

• des polices Google (Google Web Fonts) ?

=> Google propose une autre façon d'intégrer des polices gratuitement, et sans charger de fichier.
Les polices sont hébergées par Google, et il suffit d'un lien pour intégrer la police :

• on choisit sa police ;
• on clique sur le bouton "Quick-use" ;
• on coche éventuellement les options proposées ;
• il ne reste plus qu'à copier le bout de code fourni !

Code :

<link href='http://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet' type='text/css'>

(les codes @import et JavaScript sont aussi disponibles)

Il me semble intéressant de le signaler, non ?

PS : apparemment, Adobe Edge Web Fonts Get started with free web fonts propose le même type de service gratuit.
Pas "hors sujet", donc.

[zoom61]

Envoyé par jreaux62

Par contre :

=> Google propose une autre façon d'intégrer des polices gratuitement, et sans charger de fichier.
Les polices sont hébergées par Google, et il suffit d'un lien pour intégrer la police :

• on choisit sa police ;
• on clique sur le bouton "Quick-use" ;
• on coche éventuellement les options proposées ;
• il ne reste plus qu'à copier le bout de code fourni !

Code :

<link href='http://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet' type='text/css'>

(les codes @import et JavaScript sont aussi disponibles)

Il me semble intéressant de le signaler, non ?

PS : apparemment, Adobe Edge Web Fonts Get started with free web fonts propose le même type de service gratuit.
Pas "hors sujet", donc.

Mon article concerne la possibilité d'ajouter sa police avec la fonction @font-face.
Je l'ajouterai en complément dans quel temps, sachant que si la police disparaît de ces sites, il y a un risque.

@+.

[jreaux62]

Bonjour,
après lecture de ce post, je pense qu'il serait en effet bon d'ajouter une explication au tuto :

Des explications en français : Bonnes pratiques pour les déclarations @font-face

Extrait (concernant ?#iefix) :

les version d’Internet Explorer 6, 7 et 8 souffrent d’un bug de parsing qui leur font croire que l’adresse de la fonte est la chaine de caractère comprise entre la première parenthèse ouvrante et la toute dernière parenthèse fermante de la déclaration src. Le coup de génie de FontSpring a été de rajouter un “?” à la fin de l’adresse de la fonte EOT. De cette manière, les vieilles versions de IE vont bien charger le fichier de police et tout ce qui sera après le “?” ne servira à rien mais évitera un appel vers une adresse qui n’existe pas puisque ce sera compris comme étant un paramètre d’URL.