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

3 steps:

  1. Download your custom font on Goole Fonts and down load .css file ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 and save as example.css
  2. Open file you download (example.css). Now you must download all font-face file and save them on fonts directory.
  3. Edit example.css: replace all font-face file to your .css download

Ex:

_x000D_
_x000D_
@font-face {_x000D_
  font-family: 'Open Sans';_x000D_
  font-style: italic;_x000D_
  font-weight: 400;_x000D_
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');_x000D_
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;_x000D_
}
_x000D_
_x000D_
_x000D_

Look at src: -> url. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 and save to fonts directory. After that change url to all your downloaded file. Now it will be look like

_x000D_
_x000D_
@font-face {_x000D_
  font-family: 'Open Sans';_x000D_
  font-style: italic;_x000D_
  font-weight: 400;_x000D_
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');_x000D_
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;_x000D_
}
_x000D_
_x000D_
_x000D_

** Download all fonts contain .css file Hope it will help u

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