{"id":76,"date":"2010-05-24T20:26:23","date_gmt":"2010-05-24T18:26:23","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=76"},"modified":"2017-07-02T15:43:07","modified_gmt":"2017-07-02T13:43:07","slug":"google-et-son-api-webfonts","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/google-et-son-api-webfonts","title":{"rendered":"Google et son API Webfonts"},"content":{"rendered":"

On en parle depuis quelques temps, Google est d\u00e9cid\u00e9 \u00e0 faire changer le Web. La r\u00e9volution en cours propose actuellement quelques solutions.<\/p>\n

API Webfonts – Font directory<\/h2>\n

Le g\u00e9ant lance une API qui propose une solution pour int\u00e9grer des polices exotiques \u00e0 vos sites Internet gr\u00e2ce \u00e0 une ligne de code simple \u00e0 comprendre !<\/p>\n

\"Font<\/p>\n

Avant de vous donner ce fameux code, qui ne restera pas secret longtemps si vous \u00eates d\u00e9j\u00e0 sur le site de Google\u00a0Webfonts<\/a>, je vous conseille d’aller voir la\u00a0liste\u00a0des\u00a0polices\u00a0disponibles\u00a0chez \u00a0Google.
\nCelle-ci propose plus de 820 familles diff\u00e9rentes (chiffre mis \u00e0 jour en 2017). Ce qui est \u00e9norme.<\/p>\n

Bon et ce code il vient !<\/strong><\/p>\n

Voici comment int\u00e9grer une fonte gr\u00e2ce \u00e0 son nom r\u00e9pertori\u00e9 sur la page Font\u00a0directory<\/a>.<\/p>\n

<link href=\"http:\/\/fonts.googleapis.com\/css?family=Reenie+Beanie\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/code><\/pre>\n
Il vous suffit ensuite d’appeler la police comme vous le feriez habituellement avec une autre fonte gr\u00e2ce aux CSS :<\/p>\n
font-family: 'Reenie Beanie', arial, serif;<\/code><\/pre>\n
Voici un test de la police<\/span><\/p>\n
Pour obtenir le link<\/em> exact il vous suffit de cliquer sur Click to embed Font name<\/em><\/strong> lors du survol d’une des fontes propos\u00e9es par Google. Un aper\u00e7u vous sera propos\u00e9 ainsi que de nombreuses informations techniques dont l’onglet Get the code<\/strong>.<\/p>\n
API Webfonts – WebFont Loader<\/h2>\n
Vous n’\u00eates pas sans savoir qu’il y a toujours des diff\u00e9rences entre les navigateurs. Dans le chargement des polices c’est exactement la m\u00eame chose.
\nAfin de placer les navigateurs \u00e0 peu pr\u00e8s au m\u00eame niveau de ce point de vue, Google propose une sorte d’extension \u00e0 son API Webfonts qui permet l’utilisation d’un fonte commune (arial, verdana, par exemple) en attendant le chargement de la fonte exotique. Cette extension s’appelle Google\u00a0WebFont\u00a0Loader<\/a>.<\/p>\n
Voici l’exemple d’utilisation que Google donne sur son site :<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js\">\r\n<\/script>\r\n<script type=\"text\/javascript\">\r\n  WebFont.load({\r\n    google: {\r\n      families: [ 'Tangerine', 'Cantarell' ]\r\n    }\r\n  });\r\n<\/script><\/code><\/pre>\n
Il vous suffit ensuite de pr\u00e9ciser dans vos CSS quelle police commune sera utilis\u00e9e pendant le chargement de la police exotique.<\/p>\n
\r\n\/*utilis\u00e9e pour tous les P lorsque Tangerine est en chargement*\/\r\n.wf-inactive p {\r\n  font-family: serif\r\n}\r\n\/*utilis\u00e9e pour tous les P lorsque Tangerine est charg\u00e9e*\/\r\n.wf-active p {\r\n  font-family: 'Tangerine', serif\r\n}\r\n\/*utilis\u00e9e pour tous les H1 lorsque Cantarell est en chargement*\/\r\n.wf-inactive h1 {\r\n  font-family: serif;\r\n  font-size: 16px\r\n}\r\n\/*utilis\u00e9e pour tous les H1 lorsque Cantarell est en charg\u00e9e*\/\r\n.wf-active h1 {\r\n  font-family: 'Cantarell', serif;\r\n  font-size: 16px\r\n}<\/code><\/pre>\n
Il vous sera m\u00eame possible d’utiliser le loader pour le chargement d’une police utilis\u00e9e sur TypeKit<\/a> gr\u00e2ce \u00e0 l’ID de votre fonte (kit).<\/p>\n
WebFont.load({\r\n google: {\r\n   families: [ 'Tangerine', 'Cantarell' ]\r\n },\r\n  typekit: 'myKitId'\r\n});\r\n<\/code><\/pre>\n
Ici nous avons donc g\u00e9r\u00e9 le chargement des deux polices de Google, ainsi qu’une police charg\u00e9e depuis TypeKit.<\/p>\n
C’est beau, mais…<\/h2>\n
Et bien voil\u00e0, c’est sympa tout \u00e7a, mais vous d\u00e9pendez ainsi encore plus de Google. Ce n’est peut-\u00eatre pas un mal pour de petits projets, des sites Internet personnels, mais pour de la production je reste sceptique.
\nToujours est-il qu’il est bon de savoir que \u00e7a existe, et je pense l’utiliser pour mes petits projets perso, \u00e0 vous de voir de votre c\u00f4t\u00e9 \ud83d\ude09<\/p>\n
Enjoy !<\/p>\n","protected":false},"excerpt":{"rendered":"
On en parle depuis quelques temps, Google est d\u00e9cid\u00e9 \u00e0 faire changer le Web. La r\u00e9volution en cours propose actuellement quelques solutions.<\/p>\n","protected":false},"author":4,"featured_media":91,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[26,29,30,24,31,28,27],"coauthors":[597],"class_list":["post-76","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-api","tag-font","tag-fontface","tag-google","tag-police","tag-web","tag-webfonts"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t