web-dev-qa-db-fra.com

Comment télécharger plusieurs formats d'une police Web à partir du dépôt (officiel) Google Web Fonts?

J'ai appris que Google sert automatiquement les fichiers de police TTF, EOT, WOFF ou SVG en fonction du navigateur/périphérique. il est accessible depuis.

Maintenant, je prévois d’héberger et de servir les fichiers de polices à partir de mon serveur lui-même, pour lequel je devrais d’abord télécharger tous les formats de fichiers des polices Web.

Comment et où puis-je télécharger les 4 formats de fichier d'une police Web que j'aimerais utiliser?

PS: En utilisant différents navigateurs - Chrome, IE9 et Safari (dev - iPhone UA), j'ai pu obtenir les formats WOFF, EOT et TTF. Pas de chance avec le format SVG. être génial s'il existe un moyen encore plus simple.

EDIT: Oh, et d'ailleurs, je sais que je peux télécharger divers formats depuis fontsquirrel , mais je parle de télécharger depuis le dépôt officiel ici.} _

webfontsgoogle-webfonts
30
its_me

Vous pouvez cloner le répertoire de contrôleurs Web Google à l’adresse http://code.google.com/p/googlefontdirectory/ .

Vous pouvez également obtenir des fichiers de police uniques à l’adresse http://code.google.com/p/googlefontdirectory/source/browse/#font_name

8
honyovk

======= À JOUR 2016-05-31 =======

J'ai créé un petit script PHP pour obtenir les liens de téléchargement à partir d'une URL d'importation CSS de Google Fonts, telle que: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300 italic, 900italic

Vous pouvez utiliser cet outil ici: http://nikoskip.me/gfonts.php

Par exemple, si vous utilisez l'URL d'importation ci-dessus, vous obtiendrez ceci:

 enter image description here

J'en avais marre de mettre à jour cette réponse à chaque nouvelle version de Chrome, car elles changent toujours la manière dont vous pouvez usurper la chaîne de l'agent d'utilisateur. Veuillez donc utiliser ce script à la place.

======= ANCIENNE SOLUTION =======

En utilisant DevTools de Chrome, vous pouvez remplacer l’agent d’utilisateur.

Comment:

  1. Obtenez la police dont vous avez besoin sur la page Polices de Google.
  2. Vous obtiendrez une URL à importer dans votre CSS, par exemple: http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
  3. Ouvrez cette URL dans votre navigateur et vous verrez l'URL complète où vous pouvez réellement télécharger la police.
  4. Accédez à Outils de développement (F12) et appuyez sur ÉCHAP.
  5. Sélectionnez l'onglet "Emulation" puis cliquez sur le sous-onglet "Réseau".
  6. Enfin, sur Spoof user agent, sélectionnez IE9 pour le format EOT, Android 4 pour TTF et cette chaîne UA pour SVG: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3 (merci anonyme).
49
nikoskip

Comment obtenir les URL de téléchargement de polices, y compris SVG et woff2.

Les agents d’utilisateur requis pour télécharger chaque police sont les suivants. la source . 

module.exports = {
  USER_AGENTS: {
    eot: 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)',
    woff: 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0',
    woff2: 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36', // complete woff2 file for one variant
    svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
    ttf: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'
  },
  GOOGLE_FONTS_API_KEY: 'AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw',
  CACHE_DIR: __dirname + "/cachedFonts/",
}

Ajoutez ces useragents en utilisant devtool. 

 How to add new devices to chrome

la source

vous pouvez maintenant visiter https://fonts.googleapis.com/css?family=Open+Sans et usurper votre agent utilisateur, télécharger les polices en visitant l'URL trouvée dans le @font-face. 

Sinon, google-webfonts-helper fait tout pour vous .  google-webfonts-helper .__ Il y a un excellent article de blog ici du développeur où j'ai acquis l'image.

Pourquoi voulez-vous vous héberger?

Si possible, utilisez toujours un CDN commun, il est plus probable que votre police n’aura même pas besoin d’être téléchargée (mise en cache par le navigateur).

Si vous craignez que Google n'envoie la mauvaise police aux utilisateurs, probablement parce qu'ils usurpent leur agent utilisateur, vous disposez alors d'une autre option et bénéficiez des avantages de l'utilisation de l'hébergement Google. 

Insérez le @font-face vous-même, suivez les étapes ci-dessus pour trouver l'URL de la police Google et insérez-la dans le <head>;

<style>

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(google-font-url-here/opensans.eot);
    src: local('Open Sans'), local('OpenSans'),
    url(google-font-url-here/opensans.eot?#iefix) format('embedded-opentype'),
    url(google-font-url-here/opensans.woff2) format('woff2'), 
    url(google-font-url-here/opensans.woff) format('woff'), 
    url(google-font-url-here/opensans.ttf) format('truetype'), 
    url(google-font-url-here/opensans.svg#OpenSans) format('svg');
}

</style>

Cela comporte des risques car les URL peuvent changer!

4
TarranJones

J'ai fait le clone en ligne :)

https://bitbucket.org/Tymek/google-web-fonts/ Voilà! 

3
Tymek

J'ai écrit un script PowerShell pour télécharger automatiquement les polices servies à plusieurs agents utilisateurs. Pour la police de base, il obtient les quatre formats (woff, ttf, svg, eot). Google ne semble pas servir les fichiers SVG et EOT pour les poids gras et italique.


$agents = "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0",`
    "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",`
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)",`
    "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7",`
    "Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)"

foreach($arg in $args) {
    $arg;
    foreach($agent in $agents) {
        $agent;
        $webclient = New-Object System.Net.WebClient
        [void]$webclient.Headers.Add("user-agent", $agent)
        $url = "http://fonts.googleapis.com/css?family=$arg"

        $css = $webclient.DownloadString($url)
        $css
        $fonts = $css |
            Select-String -AllMatches "http://[A-Za-z0-9/._?&=%-]+" |
            Select-Object -ExpandProperty Matches |
            Select-Object -ExpandProperty Value

        foreach($font in $fonts) {
            $font
            $fontfile = [System.Io.Path]::GetFileName((new-object System.Uri $font).LocalPath)
            [void]$webclient.DownloadFile($font, "$pwd\$fontfile")
        }
    }
}

Une fois qu’il se trouve dans un fichier .ps1, il peut être appelé avec les polices à télécharger en tant qu’arguments:

PS> .\DownloadFonts.ps1 "Open+Sans:400,700,400italic,700italic"

Le script affiche le CSS extrait des serveurs de Google pour vous aider à déterminer quel fichier correspond à quel fichier (par exemple, dans mon cas, la police SVG a été extraite sous la forme d'un fichier appelé "police").

Ceci est basé sur les scripts bash publiés par RichardN et ldeck sur le blog Mise en cache locale des polices Web Google .

Pour référence, voici le script bash de ldeck:


#!/bin/sh

for family in $*; do
 for url in $( {
 for agent in \
 'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
 do
 curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
 grep -oE 'http://[A-Za-z0-9/._-]+'; \
 done } | sort -u ) ;
 do
 extn=${url##*.} ;
 file=$(echo "$family"| tr +[:upper:] _[:lower:]);
 echo $url $file.$extn;
 curl -s "$url" -o "$file.$extn";
 done
done

Référence supplémentaire: Using HTML5 AppCache .

2
AaronSieb

Je ne suis en aucun cas affilié à cette entreprise ou à ce site Web, mais j’ai pu obtenir tous les formats dont j’avais besoin à onlinefontconverter.com .

J'avais besoin des formats eot, svg, woff et ttf. J'ai déjà eu le ttf. Je l'ai téléchargé et le site a créé le reste, le tout en quelques minutes. 

1
Victor Stoddard

J'ai écrit un script python dans le cadre de mon travail sur le projet open source MDIDX . il obtiendra tous les formats de police possibles d’une famille de polices donnée à partir de Google Fonts CDN. C'est naïf - forcer brutalement les agents utilisateurs des plates-formes communes

Il peut être simplifié comme suit:

import re
import os
import requests

def main():
    font_family = "Material Icons"
    output_directory = "fonts"
    download_fonts(font_family, output_directory)

def download_fonts(font_family, output_directory, output_file_name=None):
    if not os.path.isdir(output_directory):
        os.makedirs(output_directory)

    if not output_file_name:
        output_file_name = font_family.lower().replace(" ","-")

    user_agents = USER_AGENTS.splitlines()
    user_agents = map(lambda x: x, user_agents)

    font_urls = set()
    for user_agent in user_agents:
        url = 'https://fonts.googleapis.com/icon?family={}'.format("+".join(font_family.strip().split()))
        r = requests.get(url, headers={"user-agent": user_agent})
        r.raise_for_status()
        urls = re.findall('url\((.*?)\)', r.text)
        urls = map(str, urls)
        urls = filter(str, urls)
        font_urls.update(urls)

    fonts_map = {font_url.split('.')[-1].lower(): font_url for font_url in font_urls}

    for file_extension, url in fonts_map.items():
        file_path = os.path.join(output_directory, '{output_file_name}.{file_extension}'.format(output_file_name=output_file_name, file_extension=file_extension))
        _download_file(url, file_path)

USER_AGENTS = """
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090913 Firefox/3.5.3
Mozilla/5.0 (Windows; U; Windows NT 6.1; en; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.1) Gecko/20090718 Firefox/3.5.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.1 (KHTML, like Gecko) Chrome/4.0.219.6 Safari/532.1
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; InfoPath.2)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; .NET CLR 2.0.50727; InfoPath.2)Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0; en-US)
Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2227.0 Safari/537.36
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; da-dk) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Opera/9.80 (Windows NT 6.1; U; es-ES) Presto/2.9.181 Version/12.00
Mozilla/5.0 (Linux; U; Android 2.3.4; fr-fr; HTC Desire Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-N920C Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Mobile Safari/537.36
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 BIDUBrowser/2.x Safari/537.31
Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.0 QQ-URL-Manager Mobile Safari/537.36
Mozilla/5.0 (Android 8.0.0; Tablet; rv:57.0) Gecko/57.0 Firefox/57.0
Mozilla/5.0 (Android 8.1.0; Mobile; rv:61.0) Gecko/61.0 Firefox/61.0
"""

def _download_file(url, file_path):
    r = requests.get(url)
    r.raise_for_status()
    with open(file_path, 'wb') as f:
        f.write(r.content)

if __== '__main__':
    main()

enter image description here

0
Jossef Harush