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

3 étapes :

1. Téléchargez votre police personnalisée sur Goole Fonts et téléchargez le fichier .css. ex : Télécharger http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 et enregistrer comme exemple.css
2. Ouvrir le fichier que vous téléchargez ( exemple.css ). Maintenant, vous devez télécharger tous les fichiers de polices de caractères et les sauvegarder sur polices répertoire.
3. Editar exemple.css : remplacez tous les fichiers font-face par votre fichier .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 sauvegarder dans polices répertoire. Après cela, changez l'url de tous vos fichiers téléchargés. Maintenant, il 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 contenant un fichier .css J'espère que cela vous aidera

Answer 2

En fait, vous intégrez 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');

Answer 3

Lorsque vous utilisez Google Fonts, votre flux de travail est divisé en 3 étapes : " Sélectionner ", " Personnaliser ", " Intégrer ". Si vous regardez bien, à 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 que la police est installée sur votre système, il vous suffit de l'utiliser comme n'importe quelle autre police ordinaire en utilisant la commande font-family Directive CSS.

Answer 4

1)Allez sur google fonts

2) Sélectionnez votre police et son style.

3)vous obtiendrez alors une balise de lien, à côté du lien cliquez sur importer

4. copier son lien présent dans l'URL (' ici ') et le coller dans la barre de recherche du navigateur.

5. Et vous obtiendrez quelque chose comme ceci

6. et ensuite le télécharger et le sauvegarder là où se trouvent vos fichiers de projet !

7)et ensuite l'inclure dans votre balise de lien HTML ou l'importer dans votre fichier CSS ( https://i.stack.imgur.com/NvJ60.jpg ) ( https://i.stack.imgur.com/XwK0l.jpg )

8)et ensuite utiliser la famille de polices mentionnée dans google fonts

Answer 5

J'ai suivi duydb's 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 vous aidera à éviter la mort par copier-coller.