How to download multiple formats of a web font from the (official) Google Web Fonts repo?

Question

I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.

Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).

How or where can I download the 4 file formats for a web font that I would like to use?

PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.

EDIT: Oh, and by the way, I do know that I can download various formats from fontsquirrel, but I am talking about downloading from the official repo here.

Google webfonts does not support SVG.. ie: no custom fonts for the iPad and iPhone. (https://twitter.com/FontSquirrel/status/14312358613) — Tuyen Nguyen, Feb 15 '14 at 22:30

nikoskip · Answer 1 · 2016-10-20T16:04:17.480

52

======= UPDATED 2016-05-31 =======

I made a tiny PHP script to get download links from a Google Fonts CSS import URL like: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

You can use this tool here: http://nikoskip.me/gfonts.php

For instance, if you use the above import URL, you will get this:

I got tired about updating this answer on each new release of Chrome, because they always change the way you can spoof the User Agent string, so please use this script instead.

======= OLD SOLUTION =======

Using DevTools from Chrome you can override the User Agent.

How to:

Get the font that you need at Google Fonts page.
You will get an URL to import in your CSS, like: http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
Open that URL in your browser and you will see the full URL where you can actually download the font.
Go to Developer Tools (F12) and press ESC
Select "Emulation" tab and then click on "Network" sub-tab
Finally on Spoof user agent select IE9 for EOT format, Android 4 for TTF and this UA String for 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 (thanks anonymous)

edited Oct 20 '16 at 16:04

answered Oct 23 '13 at 20:27

nikoskip

1,860
1
21
38

3

Awesomesauce! Is this against the Google Fonts TOS? – Alix Axel Jun 03 '14 at 09:52
+1 That was awesome!! Hello SVG (as first option). Now, how to turn it into a data url (without crap being injected) ... – TBB May 03 '15 at 04:54
+1 @nikoskip Thanks! You have help me a lot!!! Is that script open sourced? I really want to know how you did it and put a mirror on my site. That script should be online forever. – Carlos Faria Oct 09 '16 at 18:10
Didn't see the link! Thank you very much! ;) – Carlos Faria Oct 09 '16 at 18:28
Thanks, but why doesn't it fetch the bold and italic fonts for tff, svg, and eot? – Ricky Boyce Oct 19 '16 at 22:42
I will check the script about that. Thanks. – nikoskip Oct 20 '16 at 16:02
@RickyB I just fixed that bug ;) – nikoskip Jan 25 '17 at 19:06
@nikoskip Your link is down and it seems used by a domain parking company. Is the script open source? – Exagone313 Aug 08 '22 at 13:31
2

@Exagone313 you can find the script here: https://gist.github.com/nikoskip/bcf58106f728a3e7b7f9dcb6edaa1e82 – nikoskip Aug 19 '22 at 19:14

score 8 · Accepted Answer · answered Apr 24 '12 at 14:39

8

You can clone the Google webfonts directory at http://code.google.com/p/googlefontdirectory/

You can also get single font files at http://code.google.com/p/googlefontdirectory/source/browse/#font_name

answered Apr 24 '12 at 14:39

honyovk

2,717
18
26

4

I saw your edit about fontsquirrel, you can download the .OTF font from the Google repo, go to http://www.fontsquirrel.com/fontface/generator and create all four file-types from there. – honyovk Apr 24 '12 at 14:46
1

Either way, it's a font file generated by some other, and not Google. I am a bit biased towards Google. ;) – its_me Apr 24 '12 at 14:50
Are you worried about the integrity of the the files? I did once download the entire googlefontdirectory to my computer (only to get one file), but I cannot remember if it contained all of the file types or not. – honyovk Apr 24 '12 at 14:54
1

Oh, no. I am worried about the quality. Like I said, I am biased towards Google, and I strongly believe that their font files are of higher quality. One instance is that the TTF, EOT, and WOFF files that Google provided me for my font, are much smaller, yet in good quality than the ones provided by font-squirrel. And they both contain the same glyph set. – its_me Apr 24 '12 at 14:57
Right right... I think that the best option is to download the entire googlefontdirectory and pick out the fonts you need. – honyovk Apr 24 '12 at 15:02
2

I believe the url is obsolete now. As of today the fonts are on Github https://github.com/google/fonts – Manuel Hernandez Oct 07 '16 at 02:26

TarranJones · Answer 3 · 2016-03-09T11:21:25.467

How to get the font download urls, including SVG and woff2.

The user-agents required to download each font are as follows. 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/",
}

Add these useragents using devtool.

source

you can now visit https://fonts.googleapis.com/css?family=Open+Sans and spoof your user agent, download the fonts by visiting the url found in the @font-face.

Alternatively google-webfonts-helper does it all for you. There's a great blog post here from the developer where I acquired the image.

Why do you want to self host?

Always use a common CDN if possible, its a lot more likely that your font won't even need downloading(browser cached).

If you are worried about google sending the wrong font to users, most likely because they are spoofing their user-agent, Then there in another option and still get the benefits of using google hosting.

Insert the @font-face yourself, just use the steps above to find the google font url and insert this into the <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>

This comes with its risks as the URLS may change!

I would say, the risk is very high. I think I once read that the URL will change for every new version of the font, for caching reasons — yunzen, Sep 17 '20 at 09:01

Tymek · Answer 4 · 2020-09-17T14:05:52.303

4

https://github.com/google/fonts

old answer: ~~I made online clone of https://code.google.com/archive/p/googlefontdirectory/ :)~~

https://bitbucket.org/Tymek/google-web-fonts/ There you go!

edited Sep 17 '20 at 14:05

answered Apr 23 '13 at 12:46

Tymek

3,000
1
25
46

1

Not existing anymore – yunzen Sep 17 '20 at 08:59

score 1 · Answer 5 · answered Dec 29 '15 at 00:15

I wrote a PowerShell script to automatically download the fonts served to several different User Agents. For the basic font, it gets all four formats (woff, ttf, svg, eot). Google doesn't seem to serve SVG and EOT files for the bold and italic weights.


$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")
        }
    }
}

Once it's in a .ps1 file, it can be called with the fonts to download as arguments:

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

The script will output the CSS pulled from Google's servers to help you figure out which file is which (e.g. in my case the SVG font was pulled as a file called "font").

This is based on bash scripts posted by RichardN and ldeck on the blog post Locally Caching Google Web Fonts.

For reference, here is ldeck's bash script:


#!/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

Further reference: Using HTML5 AppCache.

score 1 · Answer 6 · answered Jan 25 '19 at 10:22

I've wrote a python script as part of my work on the open-source project MDIDX. it will get all possible font formats of a given font-family from Google Fonts CDN. It's naive - brute-forcing common platforms' user-agents

It can be simplified like so:

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 __name__ == '__main__':
    main()

TODO for myself - make this tiny script a heroku web app to respond with a zip with all font formats — Jossef Harush Kadouri, Jan 25 '19 at 10:33

How to download multiple formats of a web font from the (official) Google Web Fonts repo?

6 Answers6

How to get the font download urls, including SVG and woff2.

Why do you want to self host?

This comes with its risks as the URLS may change!

https://github.com/google/fonts

Linked