web-dev-qa-db-fra.com

Téléchargement d'une police Google et configuration d'un site hors connexion qui l'utilise

J'ai un modèle et 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 en mode hors connexion tout le temps?

cssfontsofflinegoogle-fonts
112
user2147954

Allez simplement sur Google Fonts - http://www.google.com/fonts/ , ajoutez la police de votre choix à votre collection, puis appuyez sur le bouton de téléchargement. Ensuite, utilisez 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');
}

Il suffit de changer l'adresse URL pour le lien local sur le fichier de police que vous avez téléchargé.

Vous pouvez le faire encore plus facilement. 

Il suffit de télécharger 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 remplacez ensuite votre exemple de chaîne par:

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

Découvrez google webfonts helper

Il vous permet de télécharger toutes les polices Web de Google et suggère un code CSS pour la mise en œuvre . Cet outil vous permet également de télécharger tous les formats en une seule fois, sans les 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 agent utilisateur déterminera le meilleur format).

Regardez aussi leur page Github .

266
Marco Kerwitz

Nous avons trouvé une méthode étape par étape pour y parvenir (pour 1 police):
( du 9 septembre 2013 )

  1. Choisissez votre police à l'adresse 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" près du bouton "Supprimer de la collection" et assurez-vous d'avoir sélectionné d'autres styles, tels que "gras" ...
  4. Cliquez sur le bouton "Utiliser" en bas à droite de la page.
  5. Cliquez sur le bouton de téléchargement en haut avec une image flèche bas
  6. Cliquez sur "Fichier Zip" dans le message contextuel qui apparaît
  7. Cliquez sur le bouton "Fermer" dans la popup
  8. Faites défiler la page lentement 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 "nomfichier.css" (remplacez-le en conséquence).
  13. Décompressez le fichier de polices .Zip que vous avez téléchargé (le fichier .ttf doit être extrait)
  14. Allez à " http://ttf2woff.com/ " et convertissez tout .ttf extrait de Zip en .woff
  15. Éditez desiredfontname.css et remplacez l’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 racine_doc
  16. Enregistrez le fichier, déplacez-le à son emplacement final et écrivez la balise CSS <link/> CSS correspondante pour les importer dans votre page HTML.
  17. A partir de maintenant, référez-vous à 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.

41
1111161171159459134

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!

23
sym3tri

3 étapes:

  1. Téléchargez votre police personnalisée sur Goole Fonts et chargez le fichier .css Ex: Télécharger http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic 40000 30000 enregistrer sous example.css
  2. Ouvrez le fichier que vous téléchargez (example.css). Maintenant, vous devez télécharger tous les fichiers font-face et les enregistrer dans le répertoire fonts.
  3. Edit example.css: remplace tout le fichier 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écharger http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 et enregistrer dans le répertoire fonts Après cela, changez l’URL de tous vos fichiers téléchargés. Maintenant ça va ressembler

@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 le fichier .css J'espère que cela vous aidera

3
duydb

Jetez un coup d’œil à cet article pratique pour expliquer comment utiliser les polices Google hors connexion

Essentiellement, vous incluez 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');
2
davidb

Lorsque vous utilisez Google Fonts, votre flux de travail est divisé en 3 étapes: "Sélectionner", "Personnaliser", "Incorporer". Si vous regardez bien, à l'extrémité droite de la page "Utiliser", vous trouverez 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 toute autre police standard utilisant la directive CSS font-family.

1
Pierre-Adrien Buisson

J'ai suivi duydb's answer 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 une partie de la mort copier-coller. 

0
Wytamma Wirth

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

npm - Téléchargement de polices Googles

Le projet de polices 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 de caractères open source.
Toutes les polices Google ont été ajoutées, ainsi qu'une liste petite mais croissante d'autres polices Open Source.

Juste recherchez npm pour typeface-<typefacename> pour parcourir les polices disponibles, comme typeface-roboto ou typeface-open-sans et installez-le comme suit:

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

npm - Téléchargement de Google Fonts -ers

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

Voici certaines des options:

Lectures supplémentaires: 

0
KyleMit