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

Asked 24/4, 2012 at 14:34 Answered 25/1, 2019 at 10:22

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.

Descendant answered 24/4, 2012 at 14:34 Comment(1)

Google webfonts does not support SVG.. ie: no custom fonts for the iPad and iPhone. (twitter.com/FontSquirrel/status/14312358613) – Pyrargyrite 15/2, 2014 at 22:30

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

Denadenae answered 24/4, 2012 at 14:39 Comment(6)

I saw your edit about fontsquirrel, you can download the .OTF font from the Google repo, go to fontsquirrel.com/fontface/generator and create all four file-types from there. – Denadenae 24/4, 2012 at 14:46

Either way, it's a font file generated by some other, and not Google. I am a bit biased towards Google. ;) – Descendant 24/4, 2012 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. – Denadenae 24/4, 2012 at 14:54

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. – Descendant 24/4, 2012 at 14:57

Right right... I think that the best option is to download the entire googlefontdirectory and pick out the fonts you need. – Denadenae 24/4, 2012 at 15:2

I believe the url is obsolete now. As of today the fonts are on Github github.com/google/fonts – Selfdeception 7/10, 2016 at 2:26

======= 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)

Snocat answered 23/10, 2013 at 20:27 Comment(9)

Awesomesauce! Is this against the Google Fonts TOS? – Taite 3/6, 2014 at 9:52

+1 That was awesome!! Hello SVG (as first option). Now, how to turn it into a data url (without crap being injected) ... – Unstoppable 3/5, 2015 at 4:54

+1 @Snocat 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. – Gleam 9/10, 2016 at 18:10

Didn't see the link! Thank you very much! ;) – Gleam 9/10, 2016 at 18:28

Thanks, but why doesn't it fetch the bold and italic fonts for tff, svg, and eot? – Palembang 19/10, 2016 at 22:42

I will check the script about that. Thanks. – Snocat 20/10, 2016 at 16:2

@RickyB I just fixed that bug ;) – Snocat 25/1, 2017 at 19:6

@Snocat Your link is down and it seems used by a domain parking company. Is the script open source? – Chagrin 8/8, 2022 at 13:31

@Chagrin you can find the script here: gist.github.com/nikoskip/bcf58106f728a3e7b7f9dcb6edaa1e82 – Snocat 19/8, 2022 at 19:14

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

Denadenae answered 24/4, 2012 at 14:39 Comment(6)

Either way, it's a font file generated by some other, and not Google. I am a bit biased towards Google. ;) – Descendant 24/4, 2012 at 14:50

Right right... I think that the best option is to download the entire googlefontdirectory and pick out the fonts you need. – Denadenae 24/4, 2012 at 15:2

I believe the url is obsolete now. As of today the fonts are on Github github.com/google/fonts – Selfdeception 7/10, 2016 at 2:26

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!

Euripides answered 9/3, 2016 at 8:23 Comment(1)

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 – Argal 17/9, 2020 at 9:1

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!

Errata answered 23/4, 2013 at 12:46 Comment(1)

Not existing anymore – Argal 17/9, 2020 at 8:59

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.

Undertow answered 29/12, 2015 at 0:15 Comment(0)

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()

Raney answered 25/1, 2019 at 10:22 Comment(1)

TODO for myself - make this tiny script a heroku web app to respond with a zip with all font formats – Raney 25/1, 2019 at 10:33

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

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

Recommended topics

Hot tags