{"id":10346,"date":"2014-06-22T08:49:30","date_gmt":"2014-06-22T06:49:30","guid":{"rendered":"http:\/\/flaven.fr\/?p=10346"},"modified":"2014-06-22T08:49:30","modified_gmt":"2014-06-22T06:49:30","slug":"police-google-google-font-conversion-et-choix-dune-police-multilingue-pour-le-web-le-mobile","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2014\/06\/police-google-google-font-conversion-et-choix-dune-police-multilingue-pour-le-web-le-mobile\/","title":{"rendered":"Police, Google, Google Font &#8211; Conversion et choix d&#8217;une police multilingue pour le web, le mobile&#8230;"},"content":{"rendered":"<ul>\n  <!--  Police, Google, Google Font - Conversion et choix d'une police multilingue pour le web, le mobile... --><br \/>\n  \t<!--  Police, Google, Google Font, multilingue, UTF-8 --><\/p>\n<p>Le digital et la mort de flash (quoi flash mais qui utilise encore flash) a d\u00e9finitivement fait basculer la police du cot\u00e9 du web, non je ne parle pas d&#8217;Hadopi, je parle de la gestion des polices ou &#8220;fonts&#8221; en anglais. La question n&#8217;est donc par d&#8217;ordre juridique, on se contentera d&#8217;aborder la question \u00e9pineuse du choix de la &#8220;font&#8221; et notamment dans un cadre multilingue (vous savez toutes les langues qui ne sont pas l&#8217;anglais \u00e0 fortiori les langues non-latines genre Chinois, Vietnamien, Russe&#8230;etc.)<br \/>\nDites-vous bien que les graphistes notamment ont une notion tr\u00e8s relative de la gestion des polices sachant que pour la plupart, ils travaillent en local donc sur un poste avec une gestion des polices assez aiguis\u00e9e et souvent la s\u00e9lection d&#8217;une police r\u00e9sume souvent \u00e0 une simple s\u00e9lection de police sous photoshop ! Ce qui bien \u00e9videment n&#8217;est pas reproductible aussi facilement pour le web, le mobile&#8230;etc.<br \/>\nC&#8217;est \u00e0 cette difficult\u00e9 que nous essayons de r\u00e9pondre.<\/p>\n<p><b>En fait, les solutions ne sont pas satisfaisantes, il est vrai que obtenir une police pour tous les formats (web, mobile&#8230;etc.) et pour toutes les langues hormis le khmer. Eh oui, le khmer a la particularit\u00e9 d&#8217;\u00eatre en UTF-16. Le mieux est de choisir une police google en l&#8217;esp\u00e8ce nous avons sectionn\u00e9 la Roboto avec tous les packages de langue.<\/b><\/p>\n<p> <b>Toutes les d\u00e9clinaisons de la police Roboto<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/06\/font_converter_1.jpg\" alt=\"Police, Google, Google Font - Choix d'une police multilingue pour le web, le mobile...\" width=\"500\" height=\"315\" \/>   <\/p>\n<p> <b>Le chargement de tous les packages de langue notamment le Russe et le Vietnamien. <code> Cyrillic Extended (cyrillic-ext), Latin (latin), Greek Extended (greek-ext), Greek (greek), Vietnamese (vietnamese), Latin Extended (latin-ext), Cyrillic (cyrillic)<\/code><\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/06\/font_converter_2.jpg\" alt=\"Police, Google, Google Font - Choix d'une police multilingue pour le web, le mobile...\" width=\"500\" height=\"315\" \/>   <\/p>\n<p><b>La conversion via les outils de everythingfonts.com via l&#8217;envoi des polices <code>.ttf<\/code> vous donnera tous les formats necessaires :  <code>.eot<\/code>, <code>.svg<\/code>, <code>.woff<\/code><\/b><\/p>\n<p><b>Extrait du fichier <code>roboto-black.css<\/code><\/b><\/p>\n<pre lang=\"css\">\r\n@font-face {\r\n    font-family: 'RobotoBlack';\r\n    src: url('roboto-black.eot');\r\n    src: url('roboto-black.eot') format('embedded-opentype'),\r\n         url('roboto-black.woff') format('woff'),\r\n         url('roboto-black.ttf') format('truetype'),\r\n         url('roboto-black.svg#RobotoBlack') format('svg');\r\n}\r\n<\/pre>\n<p><b>Un test complet avec du vietnamien <code>001_roboto-black_test_1.html<\/code><\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n  \r\n  &lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\r\n  &lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"vi\" lang=\"vi\" dir=\"ltr\" &gt;\r\n\r\n  &lt;head&gt;\r\n  &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/&gt;\r\n  &lt;style&gt; \r\n\r\n  @font-face {\r\n      font-family: 'RobotoBlack';\r\n      src: url('roboto-black.eot');\r\n      src: url('roboto-black.eot') format('embedded-opentype'),\r\n           url('roboto-black.woff') format('woff'),\r\n           url('roboto-black.ttf') format('truetype'),\r\n           url('roboto-black.svg#RobotoBlack') format('svg');\r\n  }\r\n\r\n  @font-face {\r\n  font-family: RobotoBlack;\r\n  font-weight:bold;\r\n  }\r\n  div {\r\n  font-family:RobotoBlack;\r\n  }\r\n  &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n\r\n  &lt;!-- insert 1 --&gt;\r\n  &lt;div&gt;\r\n  Theo h&atilde;ng tin Ph&aacute;p AFP, h&ocirc;m nay 19\/05\/2014 B&#x1EAF;c Kinh ti&#x1EBF;p t&#x1EE5;c s&#x1A1; t&aacute;n h&agrave;ng ng&agrave;n c&ocirc;ng d&acirc;n Trung Qu&#x1ED1;c kh&#x1ECF;i Vi&#x1EC7;t Nam sau c&aacute;c v&#x1EE5; b&#x1EA1;o &#x111;&#x1ED9;ng v&agrave;o tu&#x1EA7;n tr&#x1B0;&#x1EDB;c, v&agrave; c&aacute;c c&ocirc;ng ty du l&#x1ECB;ch ng&#x1B0;ng c&aacute;c tour &#x111;&#x1EBF;n Vi&#x1EC7;t Nam. B&#x1EAF;c Kinh &#x111;&atilde; &#x111;&igrave;nh ch&#x1EC9; m&#x1ED9;t ph&#x1EA7;n trao &#x111;&#x1ED5;i th&#x1B0;&#x1A1;ng m&#x1EA1;i v&#x1EDB;i H&agrave; N&#x1ED9;i v&agrave; kh&#x1EB3;ng &#x111;&#x1ECB;nh s&#x1EBD; c&oacute; nh&#x1EEF;ng bi&#x1EC7;n ph&aacute;p tr&#x1EA3; &#x111;&#x169;a kh&aacute;c.\r\n  &lt;\/div&gt;\r\n\r\n  &lt;!-- insert 2 --&gt;\r\n  &lt;p&gt;Chi&#x1EBF;n th&#x1EAF;ng l&#x1ECB;ch s&#x1EED; c&#x1EE7;a &#x111;&#x1EA3;ng Nh&acirc;n D&acirc;n  (c&aacute;nh h&#x1EEF;u)  trong cu&#x1ED9;c b&#x1EA7;u c&#x1EED; qu&#x1ED1;c h&#x1ED9;i &#x1EA4;n &#x110;&#x1ED9; ch&#x1EA5;m d&#x1EE9;t giai &#x111;o&#x1EA1;n 10 n&#x103;m c&#x1EA7;m quy&#x1EC1;n &#x111;&#x1EA7;y tai ti&#x1EBF;ng c&#x1EE7;a &#x111;&#x1EA3;ng Qu&#x1ED1;c &#x110;&#x1EA1;i.&lt;\/p&gt;\r\n\r\n  &lt;!-- insert 3 --&gt;\r\n  &lt;p&gt;NGHE TO&Agrave;N B&#x1ED8; CH&#x1AF;&#x1A0;NG TR&Igrave;NH&lt;\/p&gt;\r\n\r\n  &lt;\/body&gt;\r\n  &lt;\/html&gt;\r\n<\/pre>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Everything Fonts, un site complet sur l&#8217;export notamment<br \/><a href=\"http:\/\/everythingfonts.com\/\" target=\"_blank\">http:\/\/everythingfonts.com\/<\/a><\/li>\n<li>Le projet Google Code project for Google Web Fonts!<br \/><a href=\"https:\/\/code.google.com\/p\/googlefontdirectory\/\" target=\"_blank\">https:\/\/code.google.com\/p\/googlefontdirectory\/<\/a><\/li>\n<li>Les 638 familles de polices mis \u00e0 disposition par Google<br \/><a href=\"http:\/\/www.google.com\/fonts\/\" target=\"_blank\">http:\/\/www.google.com\/fonts\/<\/a><\/li>\n<li>19 Most Useful @Font-Face Generators for Converting Fonts to Web Safe Fonts<br \/><a href=\"http:\/\/www.queness.com\/post\/14873\/19-most-useful-font-face-generators-for-converting-fonts-to-web-safe-fonts\" target=\"_blank\">http:\/\/www.queness.com\/post\/14873\/19-most-useful-font-face-generators-for-converting-fonts-to-web-safe-fonts<\/a><\/li>\n<li>Une m\u00e9thode assez complexe pour convertir des polices pour tous les OS<br \/><a href=\"http:\/\/www.useragentman.com\/blog\/2011\/02\/20\/converting-font-face-fonts-quickly-in-any-os\/\" target=\"_blank\">http:\/\/www.useragentman.com\/blog\/2011\/02\/20\/converting-font-face-fonts-quickly-in-any-os\/<\/a><\/li>\n<li>The New Bulletproof @Font-Face Syntax<br \/><a href=\"http:\/\/www.fontspring.com\/blog\/the-new-bulletproof-font-face-syntax\" target=\"_blank\">http:\/\/www.fontspring.com\/blog\/the-new-bulletproof-font-face-syntax<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Le digital et la mort de flash (quoi flash mais qui utilise encore flash) a d\u00e9finitivement fait basculer la police du cot\u00e9 du web, non&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2014\/06\/police-google-google-font-conversion-et-choix-dune-police-multilingue-pour-le-web-le-mobile\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Police, Google, Google Font &#8211; Conversion et choix d&#8217;une police multilingue pour le web, le mobile&#8230;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Choisir une police multilingue pour le web et le mobile. Analyse des outils et r\u00e9sultats pour une gestion optimale des fonts.","bf_ai_og_title":"Police multilingue pour web et mobile","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3442,3444,3445,3447,3448,3450,3451,3435],"tags":[2214,2100,2101,317,122],"class_list":["post-10346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-technology-trends","category-tools-productivity","category-ux-product-design","category-web-design-front-end","category-web-development","tag-google","tag-google-font","tag-multilingue","tag-police","tag-utf-8"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2GS","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/06\/font_converter_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10346"}],"version-history":[{"count":3,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10346\/revisions"}],"predecessor-version":[{"id":10352,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10346\/revisions\/10352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10351"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}