[Résolu] Le @font-face de Raphael, ose-je ?

Hello,

Petite question sur le @font-face utilisé par Raphael pour la refonte de son site perso :

@font-face { 
font-family: 'NewRegular'; 
src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype'); }

Le première valeur passée à src :

local('NewRegular')

Si je traduis littéralement, cela donne (en gros hein) : "Utiliser la police NewRegular si elle est installée sur le PC (ou pas) de l'utilisateur".

Or, "NewRegular" est un nom que l'on définit arbitrairement (on aurait pu appeler ça "MyChoucrouteFont" par exemple).

Du coup, sauf si l'utilisateur a pris la peine d'enregistrer la police sur sa machine ET de la trafiquer pour que son nom soit "NewRegular" au lieu de "HittheRoad" (il ne suffit pas de changer le nom du fichier), à quoi sert cette instruction ?

Hey, autre remarque, supposons que l'utilisateur ai une police qui s'appelle "NewRegular" d'installée (j'ai vérifié elle n'existe pas, mais ça aurait pu ! ), celle-ci sera chargée prioritairement, et du coup les titres n'auront plus la typo désirée.

Le mieux à mon avis est de donner un nom proche (même similaire) à celui de la police voulue :

@font-face { 
font-family: 'HittheRoad'; 
src: local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype'); }

Me trompe-je ?

EDIT :
Au passage, je viens de remarquer que le nom de la police "HITROAD.ttf" était "Hit the Road" et non "HittheRoad", je n'ai pas vérifié mais je pense que les espaces sont importants. Du coup, l'instruction local('HittheRoad') n'est-elle pas elle aussi inutile ? En gros pour le code actuel, seul url('fonts/HITROAD.ttf') serait correctement exécuté.
Modifié par BeliG (23 Feb 2010 - 09:50)

Si j'ai bien compris, local définit la fonte locale à utiliser, donc dans la css de Raphaël on dit d'utiliser en local Newregular si pas dispo HitheRoad et si toujours pas dispo on télécharge hittheroad et toutes ces fontes prendront la référence "newregular" grâce à font-familiy.
Modifié par Patidou (18 Feb 2010 - 10:54)

Bonsoir,

Pour bien comprendre comment ça se passe avec @font-face, Je pense qu'il faut aller visiter un site qui fonctionne avec cette règle depuis assez longtemps : Allez vous promener sur http://www.fontsquirrel.com/ et voyez les gros titres d'accroche avec votre Firefox, Safari ou Opera - en fait, je crois que presque tous les navigateurs l'acceptent sauf… IE mais, le contraire nous aurait étonné.

Voyons un peu leur CSS :

@font-face {
	font-family: 'Megalopolis';
	src: url('fonts/MEgalopolisExtra.eot');
	src: local('MEgalopolis Extra Regular'), local('MEgalopolisExtra'), url('fonts/MEgalopolisExtra.otf') format('opentype');
}

Plus bas on trouve une classe qui invite le navigateur à choisir en premier pour ses titres et sous-titres la police hébergée en ligne ou sinon, dans le cas « d'un » navigateur qui ne comprendrait pas @font-face : la ribambelle habituelle de fontes "standard".

.megalopolis {
	font-family: Megalopolis, Helvetica, Arial, sans-serif;
}

Bien sûr, la première chose que j'ai fait a été de vérifier que la font "Megalopolis" n'est pas déjà installée sur ma bécane… ben non, y'est pô !
Modifié par Aureance (22 Feb 2010 - 00:14)

Aureance a écrit :
en fait, je crois que presque tous les navigateurs l'acceptent sauf… IE mais, le contraire nous aurait étonné

Internet Explorer a été le premier navigateur à implémenter @font-face (à l'époque en CSS2). C'était il y a plus de dix ans, et donc facilement 8 ou 9 ans avant les autres navigateurs.

Bande de médisants.

@Aureance : Ok, mais quel est le rapport avec mon post ?
@Patidou : idem.

Je viens d'effectuer une série de tests (avec Firefox et la police "HITROAD.ttf" à la racine du dossier, "Code d'origine" = code de Raphael).

Code d'origine, sans installer la police :
Seul l'instruction url('HITROAD.ttf') est exécutée.

Code d'origine, police installée :
idem.

Code d'origine sans propriété url, police installée :

@font-face {  
font-family: 'NewRegular';  
src: local('NewRegular'); }

@font-face {  
font-family: 'NewRegular';  
src: local('HittheRoad'); }

La typo ne fonctionne pas.

Code modifié sans propriété url, police installée :

@font-face {  
font-family: 'NewRegular';  
src: local('Hit the Road'); }

La typo fonctionne sans chargement (elle est utilisée directement via le dossier /Fonts).


Donc en conclusion, et pour reprendre ce que j'ai formulé initialement :

local('NewRegular') :
Signifie que l'on cherche à utiliser la police "NewRegular" si elle est installée sur l'ordinateur de l'utilisateur (dans le dossier Windows/Fonts pour Windows par exemple). Il s'agit bien ici du nom réel de la font (son nom tel que l'on peut le lire dans un traitement de texte, un logiciel de dessin, etc.), et non de son nom arbitraire.

"Hittheroad" ou "Hit the road" :
Les espace sont importants.


Le code qui va bien devrait donc ressembler à :

@font-face {  
font-family: 'NewRegular';  
src: local('Hit the Road'), url('HITROAD.ttf') format('truetype'); }

EDIT :

Remarque supplémentaire :

- @font-face n'installe pas la police sur le poste de l'utilisateur.

a écrit :
Downloaded fonts are only available to documents that reference them, they should not be made available to other applications or other documents. (http://www.w3.org/TR/css3-fonts/#font-resources)

Modifié par BeliG (22 Feb 2010 - 11:52)

BeliG a écrit :
Code d'origine, sans installer la police :
Seul l'instruction url('HITROAD.ttf') est exécutée. Je remarque avec firebug que la font est récupérée à chaque rafraichissement de la page (9ko à chaque fois).

Je ne sais pas comment est configuré ton Firefox mais chez moi la police est dans le cache et n'est pas rechargée.

Pour le reste, je crois que quand on utilise les polices locales il faut donner le nom postscript et le nom système pour être sûr que ça marche. Exemple chez mozilla (lien donné plus haut):

/* MgOpen Moderna                      */
/*  http://www.zvr.gr/typo/mgopen/index  */
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

Modifié par Patidou (22 Feb 2010 - 11:41)

Patidou a écrit :
Je ne sais pas comment est configuré ton Firefox mais chez moi la police est dans le cache et n'est pas rechargée.

Elle est dans le cache je suis d'accord, mais pourquoi Firebug me dit que les 9ko sont chargés à chaque fois ?

EDIT :
Mmh... Tu as raison, c'est plutôt moi qui ai mal interprété l'analyse. Je corrige de suite mon post.

Pour le reste on est d'accord ?
Modifié par BeliG (22 Feb 2010 - 11:51)

BeliG a écrit :
Pour le reste on est d'accord ?

Quoi? Qu'il y a une erreur dans le @font-face de Raphaël? Je ne sais pas trop, j'ai pas fait de tests.

Peut-être ça aurait été mieux de déclarer les deux polices avec deux @font-face, mais il doit y a avoir des choses qui m'échappe.

P.S.: Si je regarde ton code tu as zappé le newregular...
Modifié par Patidou (22 Feb 2010 - 12:06)

Patidou a écrit :
P.S.: Si je regarde ton code tu as zappé le newregular...

Hein ? Bon je crois que tu n'as pas compris où je voulais en venir.

On dirait oui.

BeliG a écrit :
Elle est dans le cache je suis d'accord, mais pourquoi Firebug me dit que les 9ko sont chargés à chaque fois ?

Tu ne dis peut-être pas au navigateur de mettre la ressource en cache (avec les en-têtes HTTP qui vont bien), du coup le navigateur fait une requête de type HEAD?

Sinon sur le fond Patidou a répondu, non? La question était bien de confirmer qu'il faut utiliser le nom Postscript de la fonte avec l'instruction local()?

Si c'est pas ça, ma réponse sera alors: Stéphanie de Monacoooo.

OK, compris un bout de la question qui était là:

BeliG a écrit :
Le mieux à mon avis est de donner un nom proche (même similaire) à celui de la police voulue :

@font-face {  
font-family: 'HittheRoad';  
src: local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype'); }

Me trompe-je ?

Ah oui: on écrit me trompé-je (orthographe classique) ou me trompè-je (réforme 1990), mais pas me trompe-je.

Et aussi: ne pas confondre le nom de fonte spécifié via font-family dans le contexte d'une règle @font-face, et le nom de fonte passé en paramètre de l'instruction local(). Le premier est un nom arbitraire que tu réutiliseras dans ta feuille de styles lorsque tu voudras utiliser la fonte. Le deuxième est un nom que le navigateur devra utiliser pour chercher une correspondance dans les polices installées sur le système et auxquelles il a accès.

Vu que les rôles sont différents, je pense qu'il est préférable de préciser un nom de fonte différent pour font-family, afin d'éviter les confusions:

@font-face {
  font-family: "HitTheRoadCustom";
  src:
    local("Hit the Road"), /* Nom Postscript pour correspondance fontes locales */
    local("HittheRoad"), /* Nom système pour correspondance fontes locales */
    url("fonts/HITROAD.ttf") format("truetype"); /* Si pas de correspondance, on télécharge la fonte */
}
body {
  font-family: "HitTheRoadCustom", sans-serif;
  /* Utilise la fonte prédéfinie (que la source soit locale ou le fichier .ttf) */
}

Il faudra aussi prendre en compte les différentes fontes d'une même police. Chaque fonte a un nom différent ("Machin Regular", "Machin Semibold", "Machin Super Bizarre"...). Si on utilise plusieurs fontes d'une même famille, on souhaitera peut-être toutes les spécificier:

@font-face {
  font-family: "MaSuperFonte";
  font-weight: normal;
  font-style: normal;
  src: local("Super Fonte Regular"), local("SuperFonteR"),
    url("fonts/SUPERFONTE1.ttf") format("truetype");
}
@font-face {
  font-family: "MaSuperFonte";
  font-weight: bold;
  font-style: normal;
  src: local("Super Fonte Bold"), local("SuperFonteB"),
    url("fonts/SUPERFONTE2.ttf") format("truetype");
}
body {
  font-family: "MaSuperFonte", sans-serif;
}
h1 {
  font-family: inherit; /* par défaut */
  font-weight: bold; /* SUPERFONTE2.ttf ou équivalent local si installé */
}

En vitesse,

Florent V. a écrit :
Tu ne dis peut-être pas au navigateur de mettre la ressource en cache (avec les en-têtes HTTP qui vont bien), du coup le navigateur fait une requête de type HEAD?

J'ai ça à chaque fois que je fais F5, pas vous ?

Florent V. a écrit :
Ah oui: on écrit me trompé-je (orthographe classique) ou me trompè-je (réforme 1990), mais pas me trompe-je.

Cool ! ( )

Florent V. a écrit :
ne pas confondre le nom de fonte spécifié via font-family dans le contexte d'une règle @font-face, et le nom de fonte passé en paramètre de l'instruction local()

Mais omg ! C'est ce que j'essaye de vous dire depuis le début ! What about le local('NewRegular') de Raphael ?!

Vous avez fait semblant de lire ou quoi ?

Sinon j'ai pas capté un truc dans ton code Florent, c'est ça :

local("HittheRoad"), /* Nom système pour correspondance fontes locales */

J'ai installé la police "Hit the Road" sur mon poste, et seule l'instruction local("Hit the Road") donne un résultat (local("HittheRoad"), comme tu l'écris et comme l'a écrit Raphael ne fonctionne pas). A quoi correspond exactement ce nom système ?

BeliG a écrit :
J'ai ça à chaque fois que je fais F5, pas vous ?

upload/6853-kikoo.jpg

Si. Mauvaise gestion du cache par le serveur et/ou le navigateur, je sais pas trop.
Ceci dit, j'ai parfois des résultats bizarres avec Firebug ou Web Inspector sur les requêtes HTTP, pour être vraiment sûr je préfère utiliser un outil plus spécialisé. Je dis peut-être une connerie, je ne connais ce sujet que superficiellement.

BeliG a écrit :
Mais omg ! C'est ce que j'essaye de vous dire depuis le début ! What about le local('NewRegular') de Raphael ?!

Bah à vue de nez c'est une connerie, quoi.
Tu attendais notre permission pour le dire?

BeliG a écrit :
Sinon j'ai pas capté un truc dans ton code Florent, c'est ça :

local("HittheRoad"), /* Nom système pour correspondance fontes locales */

J'ai installé la police "Hit the Road" sur mon poste, et seule l'instruction local("Hit the Road") donne un résultat (local("HittheRoad"), comme tu l'écris et comme l'a écrit Raphael ne fonctionne pas). A quoi correspond exactement ce nom système ?

À rien. En fait c'est pas le bon terme. Il y a d'un côté le nom «complet» de la fonte, genre "Super Fonte", et le nom Postscript qui est plutôt du genre "Superfonte".

Donc mes commentaires sont pas super exacts.

Apparemment, certains navigateurs utilisent un type de nom plutôt que l'autre.

Plus d'infos:
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ ("Think Local, Act Local")
John Daggett explique comment trouver les deux noms d'une fonte:
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

La fonte qu'utilise Raphaël a les noms suivants:

Nom PostScript: HittheRoad
Nom complet: Hit the Road

Le code de départ de Raphaël:

@font-face {
	font-family: 'NewRegular';
	src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}

code corrigé:

@font-face {
	font-family: 'NewRegular';
	src: local('Hit the Road'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}

Voilà, je crois qu'on est arrivé au bout.
Modifié par Florent V. (22 Feb 2010 - 19:13)

Florent V. a écrit :
Bah à vue de nez c'est une connerie, quoi.
Tu attendais notre permission pour le dire?

Ouep, la prochaine fois ce sera sans les gants...

Florent V. a écrit :
Apparemment, certains navigateurs utilisent un type de nom plutôt que l'autre.
[...]
John Daggett explique comment trouver les deux noms d'une fonte

Thx ! Zone d'ombre éclaired !

Florent V. a écrit :
code corrigé:

@font-face {
	font-family: 'NewRegular';
	src: local('Hit the Road'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}

Voilà, je crois qu'on est arrivé au bout.

Il était temps !

Aureance a écrit :
donc ça va bien avec tous les navigateurs ou reste-t'il encore une difficulté avec un qui n’accepterai toujours pas cette règle ?

C'est ok avec tous, faut juste gérer le cas IE qui n'accepte que le format .eot.

Aureance a écrit :
J'ai voulu installer la police de Raphaël mais finalement je n'ai pas osé à cause du message d'alerte

Zut... va falloir trouver un autre moyen d'infecter ton PC.

Aureance a écrit :
Et puis tu disais… « Le mieux à mon avis est de donner un nom proche (même similaire) à celui de la police voulue : »
[...]
je répondais en allant dans ton sens par le bout de code ou l'on voit que le nom est bien semblable partout :

Moi je suis pour donner un nom identique à celui de la police. Un seul nom à gérer me semble plus simple : celui du font-family = celui de local() = celui pour le stylage.


Maintenant je clôture et je rentre à ma maison...