Pourquoi les polices Web de Google ne s'affichent-elles pas correctement avec l'utilisation directe de la feuille de style @fontface ?

Question

J'ai récemment eu du mal à obtenir des Google Web Fonts fluides, principalement sur Google Chrome sous Windows.

Auparavant, j'utilisais le code direct de la feuille de style, arraché à l'URL que Google Web Fonts fournit, par exemple :

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

Je me rends donc à l'URL et j'utilise le code suivant

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

Je me suis dit que c'était un moyen insolent de gagner un peu de temps plutôt que de faire une demande à Google, qui doit ensuite faire une autre demande pour trouver la police.

J'ai récemment découvert que c'était la cause des problèmes de rendu (voir l'exemple suivant pour le rendu du navigateur Windows Chrome sur la page Web Font, comparé à une page de test que j'ai créée en utilisant le processus : http://imgur.com/OV2U1,ema2B )

Ma question est la suivante : pourquoi la version <link /> rend-elle la police lisse, alors qu'il s'agit de la même police avec ma méthode raccourcie ? Et aussi, y a-t-il une raison pour laquelle je devrais utiliser cette approche, dont je pensais qu'elle réduirait les temps de requête ?

Answer 1

Il y a quelques points qui peuvent répondre à votre question. Le principal est que l'URL liée affiche en fait un CSS différent pour les différents navigateurs. Ainsi, si vous l'ouvrez dans Chrome et copiez ce CSS, il se peut qu'il ne fonctionne pas dans Internet Explorer (en particulier avant la version 9).

En outre, vous utilisez un poids de police de 200, qui est un poids "léger". La valeur par défaut du texte normal est de 400. Il est donc possible que certains navigateurs n'affichent tout simplement pas la police si vous ne spécifiez pas un poids de 200. Quelque chose comme ceci devrait aider :

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}

Answer 2

Ajoutez ceci à votre fichier CSS :

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');