Police, Google, Google Font – Conversion et choix d’une police multilingue pour le web, le mobile…

Le digital et la mort de flash (quoi flash mais qui utilise encore flash) a définitivement fait basculer la police du coté du web, non je ne parle pas d’Hadopi, je parle de la gestion des polices ou “fonts” en anglais. La question n’est donc par d’ordre juridique, on se contentera d’aborder la question épineuse du choix de la “font” et notamment dans un cadre multilingue (vous savez toutes les langues qui ne sont pas l’anglais à fortiori les langues non-latines genre Chinois, Vietnamien, Russe…etc.)
Dites-vous bien que les graphistes notamment ont une notion très 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ée et souvent la sélection d’une police résume souvent à une simple sélection de police sous photoshop ! Ce qui bien évidement n’est pas reproductible aussi facilement pour le web, le mobile…etc.
C’est à cette difficulté que nous essayons de répondre.

En fait, les solutions ne sont pas satisfaisantes, il est vrai que obtenir une police pour tous les formats (web, mobile…etc.) et pour toutes les langues hormis le khmer. Eh oui, le khmer a la particularité d’être en UTF-16. Le mieux est de choisir une police google en l’espèce nous avons sectionné la Roboto avec tous les packages de langue.

Toutes les déclinaisons de la police Roboto
Police, Google, Google Font - Choix d'une police multilingue pour le web, le mobile...

Le chargement de tous les packages de langue notamment le Russe et le Vietnamien. Cyrillic Extended (cyrillic-ext), Latin (latin), Greek Extended (greek-ext), Greek (greek), Vietnamese (vietnamese), Latin Extended (latin-ext), Cyrillic (cyrillic)

La conversion via les outils de everythingfonts.com via l’envoi des polices .ttf vous donnera tous les formats necessaires : .eot, .svg, .woff

Extrait du fichier roboto-black.css

@font-face {
    font-family: 'RobotoBlack';
    src: url('roboto-black.eot');
    src: url('roboto-black.eot') format('embedded-opentype'),
         url('roboto-black.woff') format('woff'),
         url('roboto-black.ttf') format('truetype'),
         url('roboto-black.svg#RobotoBlack') format('svg');
}

Un test complet avec du vietnamien 001_roboto-black_test_1.html

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi" lang="vi" dir="ltr" >
 
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style> 
 
  @font-face {
      font-family: 'RobotoBlack';
      src: url('roboto-black.eot');
      src: url('roboto-black.eot') format('embedded-opentype'),
           url('roboto-black.woff') format('woff'),
           url('roboto-black.ttf') format('truetype'),
           url('roboto-black.svg#RobotoBlack') format('svg');
  }
 
  @font-face {
  font-family: RobotoBlack;
  font-weight:bold;
  }
  div {
  font-family:RobotoBlack;
  }
  </style>
  </head>
  <body>
 
  <!-- insert 1 -->
  <div>
  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.
  </div>
 
  <!-- insert 2 -->
  <p>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.</p>
 
  <!-- insert 3 -->
  <p>NGHE TO&Agrave;N B&#x1ED8; CH&#x1AF;&#x1A0;NG TR&Igrave;NH</p>
 
  </body>
  </html>