Found a step-by-step way to achieve this (for 1 font):
(as of Sep-9 2013)
- Choose your font at http://www.google.com/fonts
- Add the desired one to your collection using "Add to collection" blue button
- Click the "See all styles" button near "Remove from collection" button and make sure that you have selected other styles you may also need such as 'bold'...
- Click the 'Use' tab button on bottom right of the page
- Click the download button on top with a down arrow image
- Click on "zip file" on the the popup message that appears
- Click "Close" button on the popup
- Slowly scroll the page until you see the 3 tabs "Standrd|@import|Javascript"
- Click "@import" tab
- Select and copy the url between
'url('and')'- Copy it on address bar in a new tab and go there
- Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)
- Decompress the fonts .zip file you downloaded (.ttf should be extracted)
- Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff
- Edit
desiredfontname.cssand replace any url within it [between'url('and')'] with the corresponding converted .woff file you got on ttf2woff.com; path you write should be according to your server doc_root- Save the file and move it at its final place and write the corresponding
<link/>CSS tag to import these in your HTML page- From now, refer to this font by its
font-familyname in your styles
That's it. Cause I had the same problem and the solution on top did not work for me.