Les web fonts : utiliser une police précise sur son site !

Pause Café
#1

J’imagine qu’une bonne partie d’entre vous est déjà au courant mais comme c’est quelque chose de finalement assez récent, je pense que ça vaut bien un petit post.

En 2010 sont sorties les web fonts (aussi appelées WOFF). C’est un peu ce que tous les développeurs attendaient depuis 10 ans…

Pour faire simple, c’est un moyen standardisé par le W3C (on peut pas mieux faire donc) pour dire au navigateur web quelle police il doit utiliser. Et s’il ne l’a pas, elle est téléchargée automatiquement depuis le serveur sans rien demander à personne. :smiley:
Et le must, c’est que ce standard est maintenant supporté par tous les navigateurs courants.

Quelques infos supplémentaires ici : fr.wikipedia.org/wiki/Web_Open_Font_Format

mais surtout ici : hacks.mozilla.org/2009/10/woff/

Ca faisait tellement longtemps qu’on attendait un moyen propre et invisible d’utiliser des polices personnalisées dans les navigateurs !!
Voilà qui devrait en réjouir plus d’un.

Le code quant à lui est très simple : on déclare le nom et la source de la police dans la partie CSS et on applique le style CSS sur le texte comme n’importe quelle autre police comme on le fait d’habitude.

Entre ça et les balises et du HTML 5, on est enfin tranquille pour écrire des pages webs sans avoir à s’embêter avec des tas de plugins et des problèmes d’affichage selon les navigateurs !! Il était temps…

#2

Salut,

Si j’ai bien compris : je visite ton site et si la police que tu préconises n’existe pas chez moi, elle m’est télé-chargée sans me demander mon avis !
Vous avez dit LIBRE :laughing:

#3

[quote]
Si j’ai bien compris : je visite ton site et si la police que tu préconises n’existe pas chez moi, elle m’est télé-chargée sans me demander mon avis !
Vous avez dit LIBRE[/quote]

je vois pas bien le rapport de ton indignation avec le libre?

ça fait un moment que les navigateurs telechargent du contenu, genre texte, feuille de style, ou images en gif ou en jpg, des scripts a exécuter, voire même des vidéos a ton insu lorsque tu navigues pour les afficher sur ton écran, pourquoi pas des polices? je te rappelles que le but d’un navigateur est de mettre en forme les données contenues dans une page oueb, or la police est quand même un élément principal de mise en forme des informations, non?

a moins que tu surfes en mode texte avec w3m ou Lynx auquel cas tu n’est pas concerné.

#4

C’est une fonction qui ne satisfait que les designers web (même pas les développeurs, et certainement pas le grand public qui n’en a rien à secouer). Bref, une usine à gaz de plus pour encore plus de bling-bling. Tu vas me dire, plus ça brille plus c’est difficile de se rendre compte du vide abyssal du contenu, les marketeux devraient être contents eux aussi…

Question cruciale : quand, pour des raisons de confort de lecture et pour garder le peu de santé mentale qu’il nous reste, on a demandé à son navigateur de forcer systématiquement une seule et unique police, on peut éviter le téléchargement totalement inutile de plusieurs mégas ou bien on est quand même obligé de gaspiller notre bande passante ? :033

Ça commence bien ton fil mon pauvre Cluxter… :wink:

#5

question a deux balles, vous désactiver tous les css quand vous naviguez? combien d’entre vous ont pris la peine de surcharger le css de leur site préféré?

pour les fontes, c’est pareil, il n’y a rien qui interdise de désactiver la fonctionnalité dans son navigateur préféré? non?

#6

Les scripts et les vidéos sont bloquables (et bloqués en ce qui me concerne, sauf cas particuliers). Et personnellement je me passerais volontiers d’images inutiles, que je pourrais bien entendu bloquer dans mon navigateur mais dont l’absence met bien souvent la mise en page en vrac car la plupart des designers ne se donnent pas la peine de fournir une alternative sans images, ce qui au final ne me laisse pas vraiment de choix.
Enfin bref, question de goût quoi…

C’était justement ma question : quand le choix des polices n’est pas laissé à la page web (ce qui est mon cas), comment se comporte cette fonction “WOFF” ?

#7

ça répond à ta question?

#8

Malheureusement non, ça ne dit rien à propos du fait que le téléchargement ne sera effectué que s’il est réellement nécessaire.
Par contre sur la même page il y a un lien vers un exemple, où j’ai pu vérifier grâce à FireBug que mon navigateur ne fait effectivement pas la requête inutile, je te remercie donc pour le lien. :slightly_smiling:

#9

J’ai testé font-face ya quelques jours, en forçant le choix d’une police dans firefox celui-ci est respecté : la page s’affiche avec la police que tu choisis.

Mais question d’accessibilité, je trouve que le fait de choisir la police est une bonne chose. Exemple : ce forum. En désactivant les images, en haut le titre ne s’affiche pas, le titre du site est sur une image de fond, le titre étant du contenu ce n’est pas sa place. Lorsque l’on veut un titre mis en forme, souvent c’est une image, avec un texte alternatif. Avec font-face (woff j’ai pas testé), on peut mettre le titre sur une image de fond par exemple, dans la police qu’on veut (ex : lemonde.fr), ce qui permet au texte du titre d’être sélectionnable à la souris et de rester net au zoom, contrairement à une image qui, si elle est en jpg, devient floue.

sur ce site, le texte est fait avec des images. Je préfèrerais un texte dans une autre police, choisie par eux, à ces images. De plus, lorsque l’on a un texte sous forme d’image, il est immuable, même si tu dis à ton navigateur de changer la police des pages, celle des images ne va pas changer.

pour la question du poids, j’y ai pas encore réfléchi, mais il y a aussi les fontes svg qui d’après ce fil sont plus légères, mais toujours selon ce fil mozilla n’a pas l’air de les supporter.

#10

[quote]Si j’ai bien compris : je visite ton site et si la police que tu préconises n’existe pas chez moi, elle m’est télé-chargée sans me demander mon avis !
Vous avez dit LIBRE :laughing:[/quote]
Dans ce cas ce ne sont pas les polices qui sont en cause mais ton navigateur.

[quote]C’est une fonction qui ne satisfait que les designers web (même pas les développeurs, et certainement pas le grand public qui n’en a rien à secouer). Bref, une usine à gaz de plus pour encore plus de bling-bling. Tu vas me dire, plus ça brille plus c’est difficile de se rendre compte du vide abyssal du contenu, les marketeux devraient être contents eux aussi…

Question cruciale : quand, pour des raisons de confort de lecture et pour garder le peu de santé mentale qu’il nous reste, on a demandé à son navigateur de forcer systématiquement une seule et unique police, on peut éviter le téléchargement totalement inutile de plusieurs mégas ou bien on est quand même obligé de gaspiller notre bande passante ? :033[/quote]
Si ce n’est pas un troll, ça en a tout l’air. :text-woo:
On peut avoir un site joli avec du contenu intéressant, l’un n’empêche pas l’autre.
Et concernant la bande passante, libre à toi d’utiliser le navigateur qui va bien pour ne pas télécharger ce qui t’embête. Le fait que ce soit téléchargé et utilisé automatiquement répond à quelque chose comme 99,99 % des utilisateurs dans la majorité des cas, donc je ne vois pas trop où est le problème (puisque de toute façon rien n’empêche d’utiliser un plugin pour supprimer cette fonctionnalité).

C’est du CSS, autrement dit la feuille de style regarde si une police qui porte le nom de celle utilisée dans le style CSS existe sur le système ; si oui elle est utilisée, si non elle est téléchargée. C’est comme ça que fonctionne le CSS depuis le début il me semble.

#11

Où chercher ou quelle commande pour lire le css d’un site ?

#12

[quote=“ricardo”]Où chercher ou quelle commande pour lire le css d’un site ?[/quote]Un éditeur de texte… :wink: …
Où chercher? Dans le code source de la page… tu y trouveras au début de la page:

Pour “voir” le css, copie ce que tu as dans le href= et colle le à la fin de l’adresse du dit-site, tu tomberas alors sur ta zolie feuille de style (imbuvable soit dit au passage)…

:006

#13

Merci, et c’est ce que j’avais fait mais en prenant comme exemple la présente page, ça ne m’avait pas “causé” :

[quote]

Les web fonts : utiliser une police précise sur son site ! : Pause café [/quote]
#14

<link rel="stylesheet" href="styles/debianfr2/theme/stylesheet.css" type="text/css"/>→ styles/debianfr2/theme/stylesheet.css

pas par défaut, quand tu fais

body{ font-family: "Times New Roman", Verdana, DejaVuSans, serif; }
si la police times new roman est installée sur le système, il l’utilise. Sinon si verdana l’est il l’utilise. Sinon si dejavusans l’est il l’utilise. Sinon il utilise une police serif, je pense celle par défaut.

pour que ma police soit utilisée sur ma page, je dois faire (j’ai mis en format otf pour l’instant car j’ai lu ça, après ça ou woff jme suis pas posée la question). Si j’ai bien compris les navigateurs compatibles vont télécharger et utiliser chpoinscript, les autres vont prendre arial, helvetica ou une autre police sans-serif.

[code]/* FONT /
@font-face
{
font-family: ChopinScript;
src: url(’…/…/data/uploads/fonts/chopinscript.otf’),
url(’…/…/data/uploads/fonts/chopinscript.eot’); / IE */
}

[…]
article h1 {
font-family: ‘ChopinScript’, arial, helvetica, sans-serif;
}
[/code]

#15

:023 merci :006

#16

[quote=“Anthropo”]combien d’entre vous ont pris la peine de surcharger le css de leur site préféré?[/quote]Mon navigateur utilise le même css ( 5 lignes se terminant par !important ) pour tous les sites, ça permet de garder une unité visuelle et évite les chocs quand on passe d’un site à un autre.

Accesoirement ça me permet aussi de voir directement les liens non-explicites ou mal mis en valeur dans du texte. ( sur ce forum particulièrement )

#17

[quote=“kamui57”]<link rel="stylesheet" href="styles/debianfr2/theme/stylesheet.css" type="text/css"/>→ debian-fr.org/styles/debian … esheet.css

pas par défaut, quand tu fais

body{ font-family: "Times New Roman", Verdana, DejaVuSans, serif; }
si la police times new roman est installée sur le système, il l’utilise. Sinon si verdana l’est il l’utilise. Sinon si dejavusans l’est il l’utilise. Sinon il utilise une police serif, je pense celle par défaut.

pour que ma police soit utilisée sur ma page, je dois faire (j’ai mis en format otf pour l’instant car j’ai lu ça, après ça ou woff jme suis pas posée la question). Si j’ai bien compris les navigateurs compatibles vont télécharger et utiliser chpoinscript, les autres vont prendre arial, helvetica ou une autre police sans-serif.

[code]/* FONT /
@font-face
{
font-family: ChopinScript;
src: url(’…/…/data/uploads/fonts/chopinscript.otf’),
url(’…/…/data/uploads/fonts/chopinscript.eot’); / IE */
}

[…]
article h1 {
font-family: ‘ChopinScript’, arial, helvetica, sans-serif;
}
[/code][/quote]
Lorsque je disais qu’elle était téléchargée si elle n’était pas trouvée, je parlais dans le cas des WOFF uniquement. Et pour cela il faut les déclarer dans les styles CSS comme tu l’as montré avec ton exemple.

#18

Salut,

Pour moi chez qui le 512 est la vitesse maxi c’est important de savoir qui charge quoi :blush:

#19

oui contrairement aux grincheux je trouve ca cool, pare ce que beaucoup de sites utilisent des images pour avoir un titre ou une entête avec une police qui a du style, utiliser un vrai texte c’est quand même mieux pour l’accessibilité, le copier collé …

#20

Surtout ne pas réfléchir avant de baver ce serait trop constructif.
Il m’a fallut 45s pour trouver la clef : gfx.downloadable_fonts.enabled dans about:config. C’est un booléen à true par défaut, en double cliquant dessus il passe à false.

Durée de l’opération 1 minute et 15 secondes.

Secondes méthodes, en utilisant NoScript, en même temps que les scripts il bloque le téléchargement des polices.

Le libre c’est nul, les logiciels ont tellement de configurations qu’on peut pas faire la moue sans passer pour un aigri.

T’es pas dégouté d’avoir une carte graphique qui gère du 32 bits couleurs, si tu n’en veux pas plus de 2 ?

Ça je suis d’accord.