2

I have downloaded a couple of fonts in a folder of my app in my www/css folder:

/Oxygen

This folder consist of:

Oxygen-Bold.ttf
Oxygen-Light.ttf

In the traditional way, you include a link like the following in your index.html to have access to these font styles, e.g.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700|Oxygen:400,700' rel='stylesheet' type='text/css'>

However, since I want my fonts to be available offline, I am wondering what steps I need to undertake to be able to use these fonts as well?

WJA
  • 6,676
  • 16
  • 85
  • 152
  • do you need to use the .woff extension, can you also link it to the .ttf? – WJA May 15 '15 at 12:09
  • Yes, it should be possible to download the font as a `.ttf` according to this answer http://stackoverflow.com/a/27696481/3400962. – Hidden Hobbes May 15 '15 at 12:16
  • 1
    This question was already answered somewhere else: http://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it – Ryan Schaefer May 15 '15 at 12:53

1 Answers1

2

Be careful, the CSS generated by Google Fonts depends on the requesting user agent as every browser uses different font formats, that are TTF, EOT, WOFF, WOFF2 and SVG. There is no way to directly download all font variants directly from Google, other than faking the user agent and inspecting the generated CSS rules.

You can use a tool like http://www.localfont.com/ to download all font formats and automatically generate cross browser CSS rules.

udondan
  • 57,263
  • 20
  • 190
  • 175
  • Or with just changing the extension when downloading the font files ;-) – redelschaap May 15 '15 at 13:03
  • Unfortunately not. The filenames are hashes and different for every format. For exmaple compare TTF and WOFF for Oxygen bold: http://fonts.gstatic.com/s/oxygen/v5/yVHpdQrmTj9Kax1tmFSx2qCWcynf_cDxXwCLxiixG1c.ttf http://fonts.gstatic.com/s/oxygen/v5/yVHpdQrmTj9Kax1tmFSx2rO3LdcAZYWl9Si6vvxL-qU.woff - Try changing the extension for one or the other and you will get a 404. – udondan May 15 '15 at 13:52
  • Too bad, it definitely worked for a while. Google is getting smarter lol – redelschaap May 15 '15 at 14:10
  • Yeah, they make it unnecessarily hard. – udondan May 15 '15 at 14:11