How to use dowloaded Google Fonts in my app offline?

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?

Solution

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.