Typographisme - Bonnes pratiques pour les déclarations @font-face - Commentaires

Bonnes pratiques pour les déclarations @font-face - Stef

Stef — Tue, 12 Mar 2013 18:28:32 +0100

Bonjour,

j’ai remarqué une chose lors de mes déclarations sous firebug.
Dans l’onglet réseaux, le chargement de la typo ne s’arrête pas (Ob téléchargé) alors que ma typo est bien visible sur mon site !
est-ce normal ? un bug simplement de firebug ?

Merci d’avance.
Stef

Bonnes pratiques pour les déclarations @font-face - jeanmarie

jeanmarie — Tue, 26 Feb 2013 17:03:18 +0100

Salut,

il y a effectivement une petite coquille comme le précise Mathilde (commentaire #14): dans dernier paragraphe (MAJ du 4 Fevrier 2011), il manque un apostrophe fermant à format(‘eot).

une fois corrigé, ça fonctionne au poil…

Un grand merci pour cet article très utile.

jean marie

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Sun, 27 May 2012 17:32:57 +0200

@Vanessa

Si tu as suivit à la lettre la syntaxe CSS qui est présentée ici, ton problème ne peut venir que d’une seul source : tes fichiers de fonte.

Vérifie les deux points suivants :

Est-ce que l’URL vers les fichiers de fonte que tu as mis dans ta CSS est exacte (Si tu as une erreur 404, ne cherche pas plus loin c’est que tes fichiers ne sont pas ou tu dis qu’ils sont)
Est-ce que les format de fichiers utilisé sont bien les bons ? Par exemple, si tu met uniquement un format WOFF pour Internet Explorer 8, ça ne marchera jamais.

Bon courage :)

Bonnes pratiques pour les déclarations @font-face - vanessa

vanessa — Fri, 25 May 2012 17:48:39 +0200

Bonjour,
J’ai un petit soucis…
Je suis en pleine création d’un site. Je voulais mettre une police particulière, j’utilise @font-face et ce que je récupère de font squirel mais ça ne fonctionne pas.
Pour être certaine de mon code j’ai ésayé avec la police de mon précédent site et là ça fonctionne bien..
Je vois pas d’ou peut venir le problème… j’ai besoin d’aide!!
Merci..

Bonnes pratiques pour les déclarations @font-face - Thierry

Thierry — Sun, 01 Apr 2012 12:49:46 +0200

Après vérification il semblerait que ce soit Yslow qui bug sur Firefox. En utilisant la console native, je vois que ce sont bien les woff qui se chargent.

Bonnes pratiques pour les déclarations @font-face - Thierry

Thierry — Sat, 31 Mar 2012 18:10:06 +0200

Bonjour,

En utilisant les exemples de déclarations ci-dessus je constate que Firefox télécharges la version eot et non woff (en tout cas d’après les résultats d’analyse que me donne Yslow). Est-ce normal ? C’est un poil embêtant vu que woff est plus léger…

Bonnes pratiques pour les déclarations @font-face - Franck

Franck — Sat, 29 Oct 2011 08:07:04 +0200

Bonjour,

Une question de profane : Je souhaite utiliser une police qui possède deux variantes, Regular et Bold. Existe-t-il un moyen de faire en sorte que lorsque la police « MaPolice » (regular donc) est spécifiée et que j’indique font-weight: bold; pour que le navigateur aille de lui-même utiliser la variante Bold, si elle existe, plutôt que de la simuler à partir de la variante Regular ?

Sachant que je ne souhaite pas modifier le font-family là où j’utilise font-weight: bold; parce toutes les polices de la font-stack n’ont peut-être pas de variante Bold là où l’affichage sera effectué.

Mais peut-être que je fais fausse route ?

Bonnes pratiques pour les déclarations @font-face - Mathilde

Mathilde — Wed, 04 May 2011 08:54:16 +0200

Bonjour,

Merci pour cet article très complet :-)

Je suis en train de mettre en place pour la 1ère fois @font face et en copiant collant le code j’ai remarqué une petite erreur (?) ou peut-être je me trompe.

@font-face{
font-family : “maFonte”;

src : url(‘maFonte.eot?’) format(‘eot),
url(‘maFonte.woff’) format(‘woff’),
url(‘maFonte.svg#abcd’) format(‘svg’),
url(‘maFonte.ttf’) format(‘truetype’);
}

Il manque un ’ juste avant la dernière parenthèse (‘eot).

:-)

Bonnes pratiques pour les déclarations @font-face - gotcha5832

gotcha5832 — Sun, 01 May 2011 16:50:28 +0200

Merci jeremie

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Sat, 30 Apr 2011 19:22:24 +0200

@gotcha5832 Le problème c’est qu’il n’existe pas de type MIME officiel définie par l’IANA pour les fontes à l’exception notable du format Embed OpenType de Microsoft. Tu peux donc mettre un peux ce que tu veux, par exemple type MIME générique du genre :

AddType application/vnd.ms-fontobject .eot 
AddType application/octet-stream .otf .ttf .woff
AddType image/svg+xml .svg

De son coté, le site html5boilerplate.com propose les types suivant :

# Proper svg serving. Required for svg webfonts on iPad 
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz
# webfonts
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Bonnes pratiques pour les déclarations @font-face - gotcha5832

gotcha5832 — Sat, 30 Apr 2011 10:50:29 +0200

Merci pour cette article car j’etait confronter a ce problème cependant j’aurais une question supplémentaire concernant la compression gzip par DEFLATE

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript text/x-component text/x-component

mais quel sont les type pour les typo?

sinon est ce correct?

SetOutputFilter DEFLATE
AddType typo/oet .eot
AddType typo/ttf .ttf
AddType typo/svg .svg
AddType typo/woff .woff
AddOutputFilterByType DEFLATE typo/oet typo/woff typo/svg typo/ttf

Merci a vous

Bonnes pratiques pour les déclarations @font-face - Jonathan

Jonathan — Fri, 04 Feb 2011 22:12:27 +0100

Merci d’avoir relayé l’astuce.
Attention, le billet a été mis à jour chez Fontspring:

IE was failing to load webfonts if the page was loaded locally. Turns out that IE prefers the ‘?’ question mark character. The code has been updated to reflect this. Originally this post lauded the magical ‘#’ hash.

Il manque également un guillemet dans format(‘eot’).

Bonnes pratiques pour les déclarations @font-face - Serge Cheminade

Serge Cheminade — Wed, 12 Jan 2011 22:11:32 +0100

Merci Jérémie

Mon objectif est de contribuer à développer l’usage de SVG. Il y a des atouts.

La norme SVG a évolué en 2010. Voici le document de référence en ce qui concerne les polices de caractères : http://www.w3.org/TR/SVG/fonts.html Pour voir la première page de la norme http://www.w3.org/TR/SVG/

Il y a également une normalisation de SVG en ce qui concerne l’impression : http://www.w3.org/TR/SVGPrint/

Google Chrome Frame permet de sauter l’obstacle Internet Explorer.

Donc les polices que je vais créer pourront être utilisées gratuitement, même pour un usage commercial. Je n’ignore pas l’ampleur de la tâche mais je sais programmer des outils pour aller plus vite.

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Tue, 11 Jan 2011 09:52:11 +0100

En complément des échanges précédent, une petite discussion avec les gens des chez Typekit m’a permis d’avoir les informations suivantes :

Une fois compressé, SVG reste bien plus petit que TTF
iOS a optimisé le rendu des polices TTF ce qui rend leur affichage plus rapide malgré la différence de poids

La VO ici : Now serving TrueType font to iOS 4.2 devices

Ainsi, à mon sens, dans le cadre du mobile, il est difficile de dire lequel des deux format il faut privilégier. Soit vous avez un sujet de bande passante à traiter et dans ce cas, il faut regarder ce que donnera SVG, soit vous avez une question de qualité de rendu à traité, et dans ce cas, c’est plutôt TTF qu’il faudra privilégier. Le choix de TypeKit s’est fait sur TrueType, mais le mieux est de faire vos propre tests en fonction de vos cas d’utilisations. La question du rapport vitesse de chargement contre vitesse d’affichage est à voir au cas par cas (en particulier sur des réseaux lents comme les réseaux EDGE).

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Mon, 10 Jan 2011 23:37:26 +0100

@Serge : De manière général le format SVG est plus pauvre en ce qui concerne les aide au rendu des fontes. Entre autre, le format SVG n’embarque aucune information de hinting (si quelqu’un a une traduction française de hinting, je suis preneur) et les informations d’approches (kerning) son assez sommaires. Ainsi, la qualité du rendu des polices SVG dans de petits corps est fortement dépendant des moteurs de rendu qui implémentent son support et il est difficile de garantir le résultat. Ceci étant dit, en ce qui concerne le dessin à proprement parler des fontes, SVG offres des outils bien plus avancés pour la gestion des courbes ou pour la réalisation d’effets spéciaux (flous, couleurs, dégradés, etc.) ce qui fait de SVG un très bon format pour les fontes d’ornement.

Après, si tu envisage d’utiliser ta fonte sur Internet, il te faudra prévoir de toutes façon une variante dans chaque format technique pour des question d’interopérabilité.

Bonnes pratiques pour les déclarations @font-face - Serge Cheminade

Serge Cheminade — Mon, 10 Jan 2011 22:38:32 +0100

Cela fait longtemps que je m’intéresse au SVG. Mon père a une belle écriture et j’envisage de m’en servir pour faire une police SVG si ce n’est plusieurs.

Anthony dit que les fontes SVG sont de moins bonnes qualités. Que veut-il dire? Est-ce un avis partagé? (Je souhaite des arguments pour me faire un avis )

Bonnes pratiques pour les déclarations @font-face - Ombre

Ombre — Sat, 08 Jan 2011 11:22:00 +0100

Je plussoie Jeremie : j’ai une fonte personnalisé sur les titres de mon blog et elle s’affichait parfaitement sur iOS pré-4.2. Franchement je ne vois pas de différences maintenant que je suis en 4.2.1. Maintenant, il n’y a peut-être pas de hints pour l’impression ou certaines ligatures ne sont pas présente mais ce n’est pas grave. ;-)

Si je me trompe pas, les fontes svg sont aussi utilisées dans Opera 9.

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Tue, 04 Jan 2011 11:33:42 +0100

Si on compresse TTF via gZip, on obtient un fichier d’environ 25 Ko (ça dépend du réglage de la compression) ce qui est grosso modo l’équivalent de WOFF (ce qui est assez normal) mais requiers d’avoir correctement configuré son serveur Web (mais c’est aussi le cas pour servir du SVGZ).

Après, tout est question d’appréciation et de contexte. Certes, de manière général SVG est un format plus pauvre que les autres, mais pas forcément plus mauvais. Il dépend juste beaucoup plus des capacités de rendu et d’optimisation des navigateurs. Par contre, sa légerté dans un contexte mobile est incontestable et peut faire la différence sur la question des performances.

Bonnes pratiques pour les déclarations @font-face - Anthony

Anthony — Tue, 04 Jan 2011 10:42:15 +0100

1) Regarder le poids non compressé de TTF c’est petit, vu que ça se gzip très bien, c’est d’ailleurs ce que fait WOFF en natif.

2) La migration vers la dernière version de iOS est très rapide, on peut généralement considérer qu’il n’y a qu’une seule version de iOS en circulation. Ceux sous une ancienne version auront la police de fallback, pas grave.

3) Comme je le disais, les polices SVG sont de moins bonnes qualités, donc pourquoi les utiliser ? Je rappelle la tagline du site ;)

Bonnes pratiques pour les déclarations @font-face - Jeremie

Jeremie — Tue, 04 Jan 2011 10:27:42 +0100

@Anthony : Le cas de SVG est a étudier de près. iOS supporte le format TTF/OTF depuis la version 4.2 (donc assez récent). La question du poid des fontes dans un cadre mobile est assez crucial et SVG peut être un format plus léger que le format TrueType si on fait un peut attention. En effet, SVG non compressé est à peu près équivalent en poids à TTF (voir même un peu plus lourd). Par contre, dès qu’il est compressé (via HTTP ou directement au niveau du fichier avec des fichiers au format SVGZ) il est beaucoup plus léger.

A titre d’exemple, si on prend la fonte CartoGothic que nous utilisons pour le texte courrant de ce site, les poids sont les suivants :

WOFF : 24,4 Ko
SVGZ : 14,9 Ko
TTF : 49,5 Ko

TTF est un format non compressé et la différence entre WOFF et SVGZ tiens au fait que WOFF embarque beaucoup plus d’information que SVG (tous ce qui touche au hinting par exemple et qui n’existe pas avec les fontes SVG).