[css] Downloading a Google font and setting up an offline site that uses it

Found a step-by-step way to achieve this (for 1 font):
(as of Sep-9 2013)

  1. Choose your font at http://www.google.com/fonts
  2. Add the desired one to your collection using "Add to collection" blue button
  3. 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'...
  4. Click the 'Use' tab button on bottom right of the page
  5. Click the download button on top with a down arrow image
  6. Click on "zip file" on the the popup message that appears
  7. Click "Close" button on the popup
  8. Slowly scroll the page until you see the 3 tabs "Standrd|@import|Javascript"
  9. Click "@import" tab
  10. Select and copy the url between 'url(' and ')'
  11. Copy it on address bar in a new tab and go there
  12. Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)
  13. Decompress the fonts .zip file you downloaded (.ttf should be extracted)
  14. Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff
  15. Edit desiredfontname.css and 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
  16. Save the file and move it at its final place and write the corresponding <link/> CSS tag to import these in your HTML page
  17. From now, refer to this font by its font-family name in your styles

That's it. Cause I had the same problem and the solution on top did not work for me.

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to fonts

How to import a new font into a project - Angular 5 Font Awesome 5 font-family issue How do I change the font color in an html table? How to add fonts to create-react-app based projects? Changing fonts in ggplot2 Webpack "OTS parsing error" loading fonts Failed to decode downloaded font Proper MIME type for .woff2 fonts Link a .css on another folder How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?

Examples related to offline

How to install VS2015 Community Edition offline Offline Speech Recognition In Android (JellyBean) Downloading a Google font and setting up an offline site that uses it Play local (hard-drive) video file with HTML5 video tag? How do I configure Maven for offline development? How to detect online/offline event cross-browser? Android offline documentation and sample codes Check if Internet Connection Exists with jQuery? Where can I download an offline installer of Cygwin? Detect the Internet connection is offline?

Examples related to google-fonts

Downloading a Google font and setting up an offline site that uses it