84

Google Fonts seems to only offer fonts in WOFF2.

While this works fine with Chrome, WOFF2 doesn't seem to be supported by many other browsers

Is there a way to directly link to Google fonts hosted on their CDN in a format other than WOFF2?

Daniel Bang
  • 715
  • 6
  • 21
cantsay
  • 1,967
  • 3
  • 21
  • 34
  • 1
    [Check this](https://developers.google.com/fonts/docs/getting_started#Quick_Start) for everything. – The Alpha Nov 11 '14 at 21:31
  • 3
    Google serves the file according to the browser, so in most modern browsers you'll get the woff2 version. Use `curl` to get the woff file: `curl 'https://fonts.googleapis.com/css?family=Karla'` – Daniel Bang Apr 17 '18 at 18:46
  • 4
    This question is closed now (SO really has to change its policy) but the best answer to this question is this free app https://google-webfonts-helper.herokuapp.com/f – Alex from Jitbit Aug 07 '18 at 16:13
  • 1
    Daniel Bang, this did not work for me, I just got CSS for the TTF font. – Andy Swift May 07 '19 at 08:04
  • @DanielBang … as noted above, the `curl` command downloads files depending on the header and otherwise `TTF`. – Paracetamol Nov 01 '22 at 16:37
  • 1
    FYI that great heroku app mentioned by @alex-from-jitbit has moved to https://gwfh.mranftl.com/fonts – Shaw Feb 05 '23 at 13:25

4 Answers4

134

Unfortunately Google does not offer an easy way to directly download fonts. You can browse the git repository to search for the file you want, though there are only TTF files on GitHub available.

Also, do not directly link to the GitHub hosted fonts in your CSS! GitHub serves the files with the wrong mime type, which causes issues in some browsers.

While there is not a mainstream CDN for all the formats, you can use http://google-webfonts-helper.herokuapp.com to download the font files and host them yourselves.

udondan
  • 57,263
  • 20
  • 190
  • 175
  • 14
    Unfortunately [localfont](http://www.localfont.com) doesn't download all charsets of the font. It includes only the Latin charset. [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com) would be better tool for this. – vers Nov 03 '16 at 01:02
  • 6
    localfont.com appears to be dead as of July 2017. – Alan B Jul 20 '17 at 14:24
  • 11
    localfont.com is dead, but this alternative works well: https://google-webfonts-helper.herokuapp.com – Adam Reis Sep 15 '17 at 06:20
  • 1
    @AlexeyMitev - you should submit http://google-webfonts-helper.herokuapp.com as an answer. – folktrash Oct 31 '17 at 15:54
  • @folktrash - I should have but it is too late. The question is closed now. – vers Nov 03 '17 at 02:25
  • I just used Chrome developer tools and set my user agent to an iPhone 5s, and I was served up a woff file. – Greg Blass Mar 01 '18 at 19:14
  • Oh the google-webfonts-helper is sooo good :) Thanks for sharing this. It saved me a lot of work! – Greg Apr 10 '18 at 08:51
  • Any idea why the fonts served by the Google CDN are so much smaller than if I download them directly using google-webfonts-helper? For example the Latin woff2 version of Open Sans is about 9kb from the CDN but 15kb downloaded. I've tried using a tool to filter the unicode ranges defined in the css file but I only managed to get it down to 14kb. – Baldur Oct 19 '19 at 08:40
  • I don't know, maybe it's just gzipped? – udondan Oct 19 '19 at 10:02
  • 1
    Imho, it seems the Git Repo only servres TTF, just like the dl button on the font main page. I cannot find any woff2 there. https://github.com/google/fonts/tree/main/ofl/opensans – somedotnetguy Sep 06 '22 at 15:57
32

When I open the following URL in Chrome, I get a link to the font in woff2 format. When I use Firefox, it's in woff format and in an Android device running pre-4.4, it is in ttf format.

http://fonts.googleapis.com/css?family=Open+Sans

So it appears that Google delivers fonts in a format appropriate to the requesting user-agent.

Dheeraj Vepakomma
  • 26,870
  • 17
  • 81
  • 104
  • 3
    I'm accessing that in Firefox, and the fonts are in woff2 format. Maybe the situation for FF has changed? – halfer May 15 '17 at 22:23
  • I tried this in safari just now and got 'woff' vs 'woff2' for chrome -- seems to be working. @halfer my firefox supports woff2. – amwinter May 24 '17 at 05:29
  • This is a handy shortcut. Wish google would add format options to the downloads. Another work-around, since I don't see it mentioned anywhere else on this question, is to download the .ttf from Google, and upload it to Font Squirrel's webfont generator: https://www.fontsquirrel.com/tools/webfont-generator which will convert your font to whichever web format you need. – V. Rubinetti May 09 '18 at 22:25
  • 2
    this is the definite answer. By doing something like `curl "http://fonts.googleapis.com/css?family=Roboto" -H 'User-Agent: Mozilla/5.0 Firefox/90.0'` you get the CSS generated with `woff2` links, whereas passing old versions like `curl "http://fonts.googleapis.com/css?family=Roboto" -H 'User-Agent: Mozilla/5.0 Firefox/30.0'` output the older `woff` format. – Paracetamol Nov 01 '22 at 16:32
8

Another option is using the following (node) gulp package: gulp-google-webfonts.

Once installed it takes moments to install fonts and create corresponding css.

Note that when installing a Google Font with whitespace in the name, (you don't escape it) reference it with the plus sign as follows:

fonts.list

Cabin+Sketch:400
MikeiLL
  • 6,282
  • 5
  • 37
  • 68
5

You can use everythingfonts.com to convert the ttf file to a woff file.

isapir
  • 21,295
  • 13
  • 115
  • 116