Veuillez garder à l'esprit que ma réponse a beaucoup vieilli.
Il existe d'autres réponses plus sophistiquées techniquement ci-dessous, par exemple:
alors ne laissez pas le fait que c'est la réponse actuellement acceptée vous donner l'impression que c'est toujours la meilleure.
Vous pouvez également maintenant également télécharger l'ensemble des polices de google via github dans leur référentiel google / font . Ils fournissent également un instantané ~ 420 Mo de leurs polices .
Vous téléchargez d'abord votre sélection de polices sous forme de package zippé, vous fournissant un tas de polices de type vrai. Copiez-les quelque part public, quelque part, vous pouvez lier à partir de votre CSS.
Sur la page de téléchargement de Google Webfont, vous trouverez un lien d'inclusion comme ceci:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
Il relie à un CSS définissant les polices via un tas de @font-face
définitions.
Ouvrez-le dans un navigateur pour les copier et les coller dans votre propre CSS et modifiez les URL pour inclure le bon fichier de police et les bons types de format.
Donc ça:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
devient ceci:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
Comme vous pouvez le voir, un inconvénient de l'hébergement des polices sur votre propre système de cette façon est que vous vous limitez au véritable format de type, tandis que le service google webfont détermine par l'appareil d'accès quels formats seront transmis.
De plus, j'ai dû ajouter un .htaccess
fichier dans mon répertoire contenant les polices contenant les types MIME pour éviter que des erreurs n'apparaissent dans Chrome Dev Tools.
Pour cette solution, seul le vrai type est nécessaire, mais la définition de plus ne fait pas de mal lorsque vous souhaitez également inclure différentes polices, comme font-awesome
.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff