Téléchargement d'une police Google et création d'un site hors ligne qui l'utilise

Question

J'ai un modèle qui contient une référence à une police Google comme celle-ci :

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Comment puis-je le télécharger et le configurer pour l'utiliser dans mes pages qui fonctionnent hors ligne en permanence ?

Answer 1

Vérifiez l'aide de google webfonts

Il vous permet de télécharger toutes les polices web de Google et vous propose un code css pour la mise en œuvre. Cet outil vous permet également de télécharger simplement tous les formats en une seule fois, sans tracas.

Vous avez toujours voulu savoir où Google héberge ses polices de caractères ? Ce service peut s'avérer pratique si vous souhaitez télécharger tous les fichiers .eot, .woff, .woff2, .svg, .ttf d'une variante de police directement depuis Google (normalement, votre agent utilisateur détermine le meilleur format).

Jetez également un coup d'œil à leur Page Github .

Answer 2

Il suffit d'aller sur Google Fonts - http://www.google.com/fonts/ ajoutez la police que vous aimez à votre collection, et appuyez sur le bouton de téléchargement. Ensuite, il suffit d'utiliser l'@fontface pour connecter cette police à votre page web. Par ailleurs, si vous ouvrez le lien que vous utilisez, vous verrez un exemple d'utilisation de la @fontface.

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Par exemple

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Il suffit de changer l'adresse url par le lien local du fichier de police que vous avez téléchargé.

Vous pouvez le faire encore plus facilement.

Il suffit de télécharger le fichier, que vous avez lié :

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Nommez-le opensans.css ou autre.

Il suffit ensuite de remplacer les liens dans url() par votre chemin d'accès aux fichiers de police.

Et puis remplacez votre chaîne d'exemple par :

<link href='opensans.css' rel='stylesheet' type='text/css'>

Answer 3

J'ai trouvé une méthode pour y parvenir, étape par étape (pour 1 police) :
( à partir du 9 septembre 2013 )

1. Choisissez votre police à http://www.google.com/fonts
2. Ajoutez le produit souhaité à votre collection en utilisant le bouton bleu "Ajouter à la collection".
3. Cliquez sur le bouton "Voir tous les styles" près du bouton "Retirer de la collection" et assurez-vous que vous avez sélectionné d'autres styles dont vous pourriez avoir besoin, comme le "gras"...
4. Cliquez sur le bouton de l'onglet "Utilisation" en bas à droite de la page.
5. Cliquez sur le bouton de téléchargement en haut avec une image de flèche vers le bas.
6. Cliquez sur "zip file" dans le message popup qui apparaît.
7. Cliquez sur le bouton "Fermer" de la fenêtre popup
8. Faites défiler lentement la page jusqu'à ce que vous voyiez les 3 onglets "Standrd|@import|Javascript".
9. Cliquez sur l'onglet "@import".
10. Sélectionnez et copiez l'url entre 'url(' y ')'
11. Copiez-le dans la barre d'adresse dans un nouvel onglet et allez-y.
12. Faites "Fichier > Enregistrer la page sous..." et nommez-la "desiredfontname.css" (remplacez-la en conséquence).
13. Décompressez le fichier .zip des polices que vous avez téléchargé (le fichier .ttf devrait être extrait).
14. Aller à " http://ttf2woff.com/ "et convertir tout .ttf extrait du zip en .woff
15. Editar desiredfontname.css et remplacer toute url qui s'y trouve [entre 'url(' y ')' ] avec le fichier .woff converti correspondant que vous avez obtenu sur ttf2woff.com ; le chemin que vous écrivez doit être conforme à la racine du document de votre serveur.
16. Sauvegardez le fichier et déplacez-le à son emplacement définitif et écrivez le code correspondant. <link/> balise CSS pour les importer dans votre page HTML
17. Désormais, il faut désigner cette police par son nom font-family dans vos styles

C'est tout. Parce que j'ai eu le même problème et la solution en haut n'a pas fonctionné pour moi.

Answer 4

Les autres réponses ne sont pas fausses, mais j'ai trouvé que c'était le moyen le plus rapide.

1. Téléchargez le fichier zip depuis Google fonts et décompressez-le.
2. Téléchargez les fichiers de police, 3 par 3, sur le site suivant http://www.fontsquirrel.com/tools/webfont-generator
3. Téléchargez les résultats.

Les résultats contiennent tous les formats de police : woff, svg, ttf, eot. .

Et, en prime, ils génèrent le fichier css pour vous aussi !

Answer 5

Si vous souhaitez déclarer explicitement les dépendances de votre paquet ou automatiser le téléchargement, vous pouvez ajouter un paquet npm pour extraire les polices google et les servir localement.

Fontsource

Fontsource vous permet de :

Hébergez vous-même les polices Open Source dans des paquets NPM soigneusement regroupés.

Vous pouvez rechercher dans npm scope:fontsource <_typefacename_> pour parcourir les polices disponibles comme @fontsource/roboto o @fontsource/open-sans et l'installer comme ceci :

$ npm install @fontsource/roboto    --save 
$ npm install @fontsource/open-sans --save 

Téléchargeurs de polices

Pour un cas d'utilisation plus générique, il existe plusieurs paquets npm qui fournissent les polices en deux étapes, d'abord en installant la bibliothèque, puis en la faisant pointer vers le nom de la police et les options que vous souhaitez inclure.

• Plugin Google Fonts Webpack
• Google Fonts hors ligne
• Google Fonts
• Obtenir des polices Google Fonts

Pour en savoir plus :

• Comment héberger des icônes matérielles hors ligne ?
• Utilisation des icônes Material hors ligne et de la police Roboto dans l'application Electron
• Archivé : Polices de caractères