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


139

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?

Réponses:


101

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'>

8
Je n'ai toujours pas compris
user2147954

22
Contrairement aux polices Google lorsqu'elles sont serveur par Google, cette approche repose uniquement sur le format WOFF et est donc essentiellement plus limitée. De plus, Google distribue ses polices au format TTF, pas WOFF.
Jukka K. Korpela

24
Attention, fonts.googleapis génère différentes déclarations @ font-face pour différents navigateurs.
Hüseyin Yağlı

7
Ce n'est PAS correct car Google envoie un fichier CSS spécifique au navigateur à partir de fonts.googleapis.com/ ... Donc, si vous l'ouvrez avec Chrome, vous obtiendrez un @ font-face différent en l'ouvrant avec IE ou tout autre navigateur. Les polices WOFF2 par exemple ne seront envoyées qu'à Firefox et Chrome car les autres navigateurs ne les prennent pas (encore) en charge. caniuse.com/#feat=woff2
Joost van der Laan

4
Ignorez cette réponse quel que soit le statut accepté. C'est incorrect comme Joost van der Laan l'a souligné ici. Voir la réponse avec le score le plus élevé de @ marco-kerwitz ci-dessous qui doit être marquée comme la bonne réponse.
Appurist - Paul W

324

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 .


20
Je me demande simplement pourquoi Google n'a pas fait cela en premier lieu? +1
tftd

3
Cela fonctionne très bien, assurez-vous de déclarer le type de contenu respectif lors de la liaison à partir d'un fichier localContent-type: text/css; charset: UTF-8
Clain Dsilva

Si vous utilisez webpack ou un autre outil qui emballe les importations CSS / SASS, cette approche est la meilleure. Cette question décrit le processus un peu plus en détail.
Pace

Merci beaucoup pour l'allusion. J'ai sauvé ma journée!
evnica

1
one-liner , exécutez dans le répertoire cible:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
smnbbrv

43

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.


1
Ces étapes ont parfaitement fonctionné. Je veux juste ajouter cela pour ceux qui n'utilisent pas encore les extensions de fichier woff pour être sûr et ajouter ce type MIME dans le web.config.
Codage101

1
Aucun convertisseur nécessaire. Regardez la réponse de Marco Kerwitz.
Herr_Schwabullek

25

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!


+1 pour une réponse à laquelle je n'ai pas eu à réfléchir en la lisant. Ce serait génial de trouver un convertisseur de polices google direct sans avoir à les télécharger auparavant. Exemple d'utilitaire: lors de la gestion de site Web hors ligne.
Meetai.com

C'est très pratique d'avoir les différents formats de police générés pour vous. Mais quiconque l'utilise sachez que le css généré n'est pas très intelligent, il générera deux (ou plus) styles de la même police en tant que familles de polices distinctes, au lieu d'une famille de polices avec des poids de police différents. Mais c'est assez facile de le réparer vous-même dans le css.
Ken Sung le

2
Aucun convertisseur nécessaire. Regardez la réponse de Marco Kerwitz
Herr_Schwabullek

J'ai pu télécharger 10 polices en une seule fois, il semble donc que la limitation de 3 polices ait été supprimée ou augmentée
Adrian Hedley

4

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


4

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:

Lectures complémentaires :


3

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');

lien mort vers l'article
TecHunter

Le téléchargement n'inclut pas le fichier .eot
exe

2

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.


0

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.


-1

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.


A FAIT la même chose mais d'autres pages sont déformées. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
user2147954

Votre fichier de police s'appelle- font.wofft-il? Avez-vous vérifié que le fichier est chargé?
Terry

@Terry Je ne suis pas sûr de ce que vous voulez dire - c'était un nom fictif pour le fichier.
Mattios550

-3

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); 
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.