Archive pour le mot-clef ‘Google’

Utiliser la police de son choix sur son site internet

ArobaseL’intégration de polices de caractères sur un site web a longtemps été un casse tête pour les intégrateurs. On avait diverses solutions à portée de main : du flash, du javascript et quelques bidouilles assez incompatibles entres-elles pour lier directement une police dans le CSS.

Techniquement, si le W3C recommande depuis longtemps l’utilisation de Font-Face, celle-ci n’a pas toujours été implémentée comme il le faut dans les navigateurs. Aujourd’hui, l’horizon s’éclaircit progressivement même s’il faut encore fourber avec plusieurs formats pour arriver à un résultat efficace sur l’ensemble de la gamme des navigateurs. Dans l’ensemble on y arrive assez bien. Démonstration.

Tu l’a acheté ? Chuuuut ! Faut pas le dire sur internet…

Ah ! Un détail avant de vous lancer dans le code : une police de caractère est une oeuvre assimilable à un logiciel sur le plan juridique. Donc on touche au copyright (normal), aux droits d’auteur (un peu) et aux droits de diffusion (surtout). Si vous avez acheté une police, relisez bien les conditions d’utilisation, il est fort à craindre que vous n’ayez pas le droit de la proposer en téléchargement sur votre site web. Logique à priori, vous n’allez pas donner un truc qui se vend…

Sauf que… Les règles de Gutenberg ont un peu de mal avec le monde moderne. Si vous utilisez votre police sur votre site, il faudra bien que la machine de l’internaute la télécharge pour l’afficher. Même si l’utilisateur ne pourra pas (à priori, j’vous connais) s’en resservir dans un autre logiciel, vous placez cette police en téléchargement. C’est un fait. C’est stupide, mais c’est comme ça, sed lex.

L’idéal reste (once more) les polices gratuites ou sous Creative Commons. Perso, j’ai pris l’habitude de me fournir chez Google ou sur DaFont. Quitte à faire un petit don à l’auteur au passage (bah, au prix des polices payantes, ça reste tout bénef’ et vous assurez la pérennité du truc…).

Fourrer tout ça, proprement, dans son CSS…

Aller, une police libre dans une main, un ordi dans l’autre, comme l’ensemble des navigateurs ne comprennent pas tous la même chose, il faudra prendre soin de satisfaire chacun avec son ou ses formats de police préférés :

  • de l’Embedded OpenType (eot) pour Internet Explorer 4+
  • du Web Open Font Format (woff) pour Firefox 3.6+, Internet Explorer 9+ et Chrome 6+
  • et du Scalable Vector Graphics (svg) pour Chrome 3+, Opéra 9+
  • du TrueType (ttf) supporté par Firefox 3.5+, Opéra 10+, Safari 3.1+, Chrome 4+

Attention, l’ordre d’appel des différents formats dans le CSS compte et évitera à un navigateur qui comprend à la fois le SVG et le WOFF de charger le SVG à la place du WOFF. Au passage, ça vous évitera aussi quelques bugs sur certains navigateurs qui se mélangent un peu les pinceaux quand l’ordre ne leur convient pas (tatillons ?).

Pour convertir votre police dans les différents formats nécessaires à la pleine satisfaction les différents navigateurs Font Squirrel sera votre sauveur. Attention, ce dernier vous renverra à la loi si vous lui proposez une police handicapée d’un vilain copyright (et toc !).

Assez bavardé, voici le code magique à placer en tête de votre CSS.

@font-face {
    font-family: 'maPolice';
    src: url('fonts/maPolice.eot?')format('eot'),
         url('fonts/maPolice.woff')format('woff'),
         url('fonts/maPolice.svg#IdMaPolice')format('svg'),
         url('fonts/maPolice.ttf')format('truetype');
}

Explication de texte

  • La directive font-family permet de nommer la police pour les appels dans le CSS.
  • Dans les sources, on refile l’ensemble des formats aux navigateurs. Le navigateur s’arrêtera à la première qui lui convient.
  • Le point d’interrogation après l’extension eot permet de forcer le téléchargement sur IE afin qu’il n’interprète pas ce qui se trouve après ce caractère (ce qui permet d’ajouter les autres sources).
  • Le format eot s’appelle en fait embedded-opentype, l’utilisation d’eot leurre IE9 qui du coup ne connaît pas ce format et chargera le Web Open Font Format plus léger.
  • Dans le format SVG on notera une chaine louche après l’ancre. Il s’agit de l’identifiant du SVG. Vous le trouverez directement dans les premières lignes du fichier, dans une ligne qui ressemble à ça : <font id="IdMaPolice" horiz-adv-x="786" >.

Une fois la police incluse, elle sera utilisable comme les autres directement dans une directive font-family :

body { font-family: maPolice,sans-serif; } 

Optimiser une police de caractère…

En fonction de vos besoins, il est tout à fait envisageable d’épurer une police pour un usage web. Souvent les polices de caractères contiennent des caractères que l’on n’utilise jamais (symboles, autres langues, etc…) et que l’on peut retirer du package.
Pour ça, il existe deux solutions. Les plus courageux passeront par Font Forge, les plus pressés se concentrerons sur Font Squirrel. Dans le mode « Expert » de ce dernier, on trouve une option « Custom Subsetting » qui vous permettra de sélectionner très finement la gamme de caractères ou uniquement les caractères dont vous aurez besoin. On peut facilement imaginer faire passer le poids d’une police de 150ko à 6ko pour un titre de site par exemple. On est alors très proche du temps de chargement d’une image équivalente, et tellement plus accessible !

L’intégration en mode feignasse by Google

Parallèlement à cette technique qui peut paraître un peu longue à première vue, Google vient de lancer une bibliothèque de polices de caractères librement utilisables. On peut chercher, voir, et surtout, on peut intégrer ça dans son site en une seule ligne de CSS. Google fera le reste (et enverra le bon CSS au bon navigateur).

Google web font previewer

La bibliothèque n’est pas encore très fournie et cette API est encore en version Beta, mais c’est particulièrement prometteur.

Si le sujet vous intéresse, je vous conseille cette lecture ou encore celle-ci, et si vous avez vous aussi des petits conseils sur l’utilisation des polices sur le web, je suis preneur !!


CDN Gratuit : utiliser les serveurs frontaux de Google pour créer son Content Data Network

Un CDN (Content Data Network) permet à stocker des données statiques d’un site internet « in the cloud ». Cette méthode offre différents avantages non négligeables :

  • Réduction de la bande passante utilisée sur le serveur principal,
  • Réduction de la charge processeur sur votre serveur, l’économie peut-être consacrée au traitement des fichiers dynamiques,
  • Parallélisation des téléchargements côté client (donc plus rapide),
  • Les fichiers statiques sont servis à partir du serveur le plus proche de l’internaute, les « routes » sont donc plus courtes,
  • Les entêtes envoyées à partir du CDN sont personnalisables, il est donc possible d’envoyer du contenu sans Cookies (cookieless content) ni autres fioritures.

Bref, pour vous la faire courte, l’utilisation d’un CDN est un bon moyen d’accélérer l’affichage de son site tout en délestant son serveur.

Comment ça marche ?

Le principe est simple, le site web fait appel à votre domaine pour tout ce qui est dynamique et tout le contenu statique est appelé via un (ou plusieurs) domaine(s) dédié(s). Votre site utilise donc au moins 2 types d’url : www.mondomaine.ext et www.monCDN.ext.
Bien entendu, il est tout à fait possible de personnaliser l’url du domaine afin d’obtenir une adresse du type monCDN.mondomaine.ext, du coup, on ne touche pas au référencement et on n’en fout pas partout. Lire le billet »


Obtenir un graphique à partir d’une URL

Google Chart ToolsJe viens de découvrir via Cedric Motte un petit outil de Google qui permet de faire très simplement de beaux graphiques et de les appeler dans une page HTML ou un mail via une simple URL. Ca s’appelle Google Chart Tools ou Image Charts et ça me paraît particulièrement pratique. Fini les gros codes pour avoir un petit tableau de bord avec quelques graphiques faits à la volée dans une appli web.

D’autant que, pour simplifier un peu le truc (qui à la base est une API, donc un bidule pour connaisseurs), Google propose un éditeur, genre de bac à sable, pour vous permettre de dessiner très facilement vos premiers graphiques. La preuve :

Petit graph trèèèèès vite fait...


De l’optimisation d’un site web

La question est vaste et c’est un travail quotidien : compression, réduction du nombre des requêtes, mise en cache, progression non obstrusive, parallélisation… Quelques points qui me paraissent essentiels et qui sont encore trop souvent délaissés.

L’optimisation d’un site web joue à chaque fois sur quelques millièmes de secondes. Ça peut paraître complètement dérisoire, ceci étant, je suis passé un affichage en 6 secondes pour la page d’accueil de ce blog à moins d’une seconde et demi. L’expérience utilisateur n’est plus tout la même !

Pour info Google prend officiellement en compte le temps de chargement d’une page web dans le classement des résultats de Google depuis le moins d’Avril. Lire le billet »


Comment Google prépare l’arrivée de la Google TV

Google Instant PreviewsDébut septembre, Google lançait Instant Search qui affiche les résultats de recherche au fur et à mesure de la saisie. Il n’est plus nécessaire de valider une recherche mais surtout, le site voulu peut apparaître dans les résultats dès les premières lettres.

Début octobre, on voit arriver, discrètement, un petit triangle bleu à côté du premier résultat sur une recherche. À la souris, on scroll, on clique, on part, et le triangle n’a pas bougé. Sert à rien ce truc ? Non, avec une souris, il ne sert à rien. Lire le billet »