![\"Font](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2010\/05\/font-directory1.gif\")
<\/p>\nOn 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
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
<\/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. 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 Il vous suffit ensuite d’appeler la police comme vous le feriez habituellement avec une autre fonte gr\u00e2ce aux CSS :<\/p>\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 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. Voici l’exemple d’utilisation que Google donne sur son site :<\/p>\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
\nCelle-ci propose plus de 820 familles diff\u00e9rentes (chiffre mis \u00e0 jour en 2017). Ce qui est \u00e9norme.<\/p>\n<link href=\"http:\/\/fonts.googleapis.com\/css?family=Reenie+Beanie\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/code><\/pre>\nfont-family: 'Reenie Beanie', arial, serif;<\/code><\/pre>\nAPI Webfonts – WebFont Loader<\/h2>\n
\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<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\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