[css] Google 글꼴 다운로드 및 글꼴을 사용하는 오프라인 사이트 설정

이것을 달성하기위한 단계별 방법을 찾았습니다 (1 글꼴) :
( 2013 년 9 월 9 일 기준 )

1. http://www.google.com/fonts 에서 글꼴을 선택하십시오 .
2. “컬렉션에 추가”파란색 버튼을 사용하여 컬렉션에 원하는 것을 추가하십시오
3. “컬렉션에서 제거”버튼 근처에있는 “모든 스타일보기”버튼을 클릭하고 ‘굵게’와 같은 다른 스타일을 선택했는지 확인하십시오.
4. 페이지 오른쪽 하단의 ‘사용’탭 버튼을 클릭하십시오.
5. 아래쪽 화살표 이미지가있는 상단의 다운로드 버튼을 클릭하십시오.
6. 나타나는 팝업 메시지에서 “zip 파일”을 클릭하십시오
7. 팝업에서 “닫기”버튼을 클릭하십시오
8. 3 개의 탭 “Standrd | @import | Javascript”가 표시 될 때까지 페이지를 천천히 스크롤하십시오.
9. ‘@ 가져 오기’탭을 클릭하십시오.
10. 선택하고 URL을 복사 사이 'url('와')'
11. 새 탭의 주소 표시 줄에 복사하여 이동하십시오.
12. “파일> 다른 이름으로 페이지 저장 …”을 수행하고 이름을 “desiredfontname.css”로 지정하십시오 (적절하게 교체).
13. 다운로드 한 글꼴 .zip 파일의 압축을 풉니 다 (.ttf를 추출해야 함)
14. ” http://ttf2woff.com/ “으로 이동하여 zip에서 추출 된 .ttf를 .woff로 변환하십시오.
15. ttf2woff.com에있는 해당 변환 된 .woff 파일로 desiredfontname.css[ 'url('및 사이 ')']의 URL을 편집 하고 바꿉니다. 작성하는 경로는 서버 doc_root를 따라야합니다
16. 파일을 저장하고 최종 위치로 옮기고 해당 <link/>CSS 태그를 작성 하여 HTML 페이지로 가져옵니다.
17. 이제 font-family스타일에서 이름 으로이 글꼴을 참조하십시오.

그게 다야. 원인 나는 같은 문제가 있었고 위에있는 해결책이 효과가 없었습니다.

답변

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

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

$ npm install typeface-roboto    --save
$ npm install typeface-open-sans --save
$ npm install material-icons     --save 

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');