Télécharger une police Google et configurer un site hors ligne qui l'utilise

J'ai un modèle et il a 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 sont en permanence hors ligne?

Accédez simplement à Google Fonts - http://www.google.com/fonts/ , ajoutez la police que vous aimez à votre collection et appuyez sur le bouton de téléchargement. Et puis utilisez simplement la @fontface pour connecter cette police à votre page Web. Btw, si vous ouvrez le lien que vous utilisez, vous verrez un exemple d'utilisation de @fontface

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

À titre d'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');
}

Changez simplement l'adresse URL du lien local sur le fichier de police que vous avez téléchargé.

Vous pouvez le faire encore plus facilement.

Téléchargez simplement le fichier, vous avez lié:

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

Nommez-le opensans.css ou plus.

Ensuite, changez simplement les liens dans url () en votre chemin vers les fichiers de polices.

Et puis remplacez votre exemple de chaîne par:

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

Découvrez l' assistant Google Webfonts

Il vous permet de télécharger toutes les polices Web de Google et suggère du code css pour l'implémentation. Cet outil vous permet également de télécharger simplement tous les formats à la fois sans tracas.

Vous avez toujours voulu savoir où Google héberge ses polices Web? Ce service peut être pratique si vous souhaitez télécharger tous les fichiers .eot, .woff, .woff2, .svg, .ttf d'une variante de police directement à partir de Google (normalement, votre User-Agent déterminera le meilleur format).

Jetez également un œil à leur page Github .

Nous avons trouvé un moyen étape par étape pour y parvenir (pour 1 police):
(à partir du 9 septembre 2013 )

1. Choisissez votre police sur http://www.google.com/fonts
2. Ajoutez celui que vous souhaitez à votre collection en utilisant le bouton bleu "Ajouter à la collection"
3. Cliquez sur le bouton "Voir tous les styles" à côté du bouton "Supprimer de la collection" et assurez-vous que vous avez sélectionné d'autres styles dont vous pourriez également avoir besoin, tels que "gras" ...
4. Cliquez sur le bouton de l'onglet "Utiliser" en bas à droite de la page
5. Cliquez sur le bouton de téléchargement en haut avec une flèche vers le bas
6. Cliquez sur "fichier zip" dans le message contextuel qui apparaît
7. Cliquez sur le bouton "Fermer" dans la fenêtre contextuelle
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('et')'
11. Copiez-le sur la barre d'adresse dans un nouvel onglet et allez-y
12. Faites "Fichier> Enregistrer la page sous ..." et nommez-le "nom de police désiré.css" (remplacez-le en conséquence)
13. Décompressez le fichier .zip des polices que vous avez téléchargé (.ttf doit être extrait)
14. Allez sur " http://ttf2woff.com/ " et convertissez tout .ttf extrait de zip en .woff
15. Modifiez desiredfontname.csset remplacez toute URL qu'elle contient [entre 'url('et ')'] par le fichier .woff converti correspondant que vous avez obtenu sur ttf2woff.com; le chemin que vous écrivez doit être en fonction de votre serveur doc_root
16. Enregistrez le fichier et déplacez-le à sa place finale et écrivez la <link/>balise CSS correspondante pour les importer dans votre page HTML
17. Désormais, font-familyfaites référence à cette police par son nom dans vos styles

C'est tout. Parce que j'avais le même problème et que la solution en haut ne fonctionnait pas pour moi.

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 à partir des polices Google et décompressez-le.
2. Téléchargez les fichiers de polices 3 à la fois sur 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!

3 étapes:

1. Téléchargez votre police personnalisée sur Goole Fonts et téléchargez le fichier .css ex: Téléchargez http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 et enregistrez-le sous example.css
2. Ouvrez le fichier que vous téléchargez ( example.css ). Vous devez maintenant télécharger tous les fichiers font-face et les enregistrer dans le répertoire des polices .
3. Modifier example.css : remplacez tous les fichiers font-face par votre téléchargement .css

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Regardez src: -> url. Téléchargez http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 et enregistrez-le dans le répertoire des polices . Après cela, changez l'URL de tous vos fichiers téléchargés. Maintenant, ça ressemblera à

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Télécharger toutes les polices contiennent un fichier .css J'espère que cela vous aidera

Si vous souhaitez déclarer explicitement vos dépendances de package ou automatiser le téléchargement, vous pouvez ajouter un package de nœuds pour extraire les polices google et les diffuser localement.

NPM - Google polices Télécharger s

Le projet typefaces crée des packages NPM pour les polices Open Source:

Chaque paquet est livré avec tous les fons et css nécessaires pour auto-héberger une police open source.
Toutes les polices Google ont été ajoutées ainsi qu'une liste petite mais croissante d'autres polices open source.

Recherchez simplement npm pour parcourir les polices disponibles telles que typeface-roboto ou typeface -open-sans et installez-les comme ceci:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Google Fonts Download- ers

Pour le cas d'utilisation plus générique, il existe plusieurs packages npm qui fourniront les polices en deux étapes, d'abord en obtenant le package, puis en le pointant sur le nom de la police et les options que vous souhaitez inclure.

Voici quelques-unes des options:

• Plug-in Webpack de Google Fonts
• Google Fonts hors ligne
• Polices Google
• Obtenez Google Fonts

Lectures complémentaires :

• Comment héberger des icônes matérielles hors ligne?
• Utilisation des icônes matérielles hors ligne et de la police Roboto dans l'application Electron

Vous incluez essentiellement la police dans votre projet.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Lorsque vous utilisez Google Fonts, votre flux de travail est divisé en 3 étapes: "Sélectionner", "Personnaliser", "Intégrer". Si vous regardez de plus près, à l'extrémité droite de la page "Utiliser", il y a une petite flèche qui vous permet de télécharger la police actuellement dans votre collection.

Après cela, et une fois la police installée sur votre système, il vous suffit de l'utiliser comme n'importe quelle autre police standard utilisant la font-familydirective CSS.

J'ai suivi la réponse de duydb pour produire le code python ci-dessous qui automatise ce processus.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

J'espère que cela aidera avec la mort du copier-coller.

Vous devez télécharger la police et la référencer localement.

Téléchargez le à CSSpartir du lien que vous avez publié, puis téléchargez tous les WOFFfichiers et (si nécessaire) convertissez-les enTTF .

Puis changez le CSS partir du lien que vous avez publié pour inclure les polices localement.

De

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

À

url(/path/to/font/font.woff)

Voila! Vous devrez peut-être faire plus, mais ce qui précède est l'essentiel. Cet article explique un peu mieux.

téléchargez simplement la police et extrayez-la dans un dossier. puis liez cette police. le code ci-dessous a fonctionné correctement pour moi.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}