Download and extract selected fonts (collection) from google fonts library. Then open the link href target of your include statement in your browser e.g.:

http://fonts.googleapis.com/css?family=Open+Sans

Copy the desired @font-face statement from there, to your local css file:

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/u-WUoqrET9fUeobQW7jkRVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

And modify it like to your needs (truetype format + file path):

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
}

Thats it.

Categories: CSSDesign