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

템플릿이 있으며 다음과 같은 Google 글꼴에 대한 참조가 있습니다.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

항상 오프라인으로 실행되는 페이지에서 다운로드하여 사용하도록 설정하려면 어떻게해야합니까?

Google 글꼴 ( http://www.google.com/fonts/) 로 이동하여 원하는 글꼴을 컬렉션에 추가 한 다음 다운로드 버튼을 누르십시오. 그런 다음 @fontface를 사용하여이 글꼴을 웹 페이지에 연결하십시오. Btw, 사용중인 링크를 열면 @fontface를 사용하는 예가 표시됩니다

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

예를 들어

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

URL 주소를 다운로드 한 글꼴 파일의 로컬 링크로 변경하십시오.

더 쉽게 할 수 있습니다.

파일을 다운로드하기 만하면됩니다.

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

opensans.css 등의 이름을 지정하십시오.

그런 다음 url ()의 링크를 글꼴 파일의 경로로 변경하십시오.

그런 다음 예제 문자열을 다음으로 바꾸십시오.

<link href='opensans.css' rel='stylesheet' type='text/css'>

Google 웹 폰트 도우미 확인

Google의 모든 웹 글꼴을 다운로드하고 구현을위한 CSS 코드를 제안합니다. 이 도구를 사용하면 번거 로움없이 모든 형식을 한 번에 간단하게 다운로드 할 수 있습니다.

Google이 웹 폰트를 호스팅하는 위치를 알고 싶습니까? 이 서비스는 Google에서 직접 글꼴 변형의 모든 .eot, .woff, .woff2, .svg, .ttf 파일을 다운로드하려는 경우 유용합니다 (일반적으로 User-Agent가 최상의 형식을 결정 함).

또한 Github 페이지를 살펴보십시오 .

이것을 달성하기위한 단계별 방법을 찾았습니다 (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스타일에서 이름 으로이 글꼴을 참조하십시오.

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

다른 답변은 틀리지 않지만 이것이 가장 빠른 방법이라는 것을 알았습니다.

1. Google 글꼴에서 zip 파일을 다운로드하여 압축을 풉니 다.
2. 한 번에 글꼴 파일 3을 http://www.fontsquirrel.com/tools/webfont-generator에 업로드 하십시오.
3. 결과를 다운로드하십시오.

결과에는 모든 글꼴 형식 (woff, svg, ttf, eot)이 포함 됩니다.

그리고 추가 보너스로 그들은 당신을 위해 CSS 파일을 생성합니다!

3 단계 :

1. Goole Fonts에서 맞춤 글꼴을 다운로드하고 .css 파일을 다운로드 하십시오 . 예 : http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300을 다운로드 하고 example.css로 저장 하십시오 .
2. 다운로드 한 파일을여십시오 ( example.css ). 이제 모든 글꼴 파일을 다운로드하여 fonts 디렉토리 에 저장해야합니다 .
3. example.css 편집 : 모든 글꼴 파일을 .css 다운로드로 바꿉니다.

전의:

@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;
}

src :-> url을보십시오. http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2를 다운로드 하여 fonts 디렉토리에 저장 하십시오 . 그 후 URL을 다운로드 한 모든 파일로 변경하십시오. 이제는 다음과 같이 보일 것입니다

@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;
}

** .css 파일이 포함 된 모든 글꼴을 다운로드하십시오.

패키지 종속성을 명시 적으로 선언하거나 다운로드를 자동화하려면 노드 글꼴을 추가하여 Google 글꼴을 가져와 로컬에서 제공 할 수 있습니다.

NPM - 구글 폰트 다운로드 의

서체 프로젝트는 오픈 소스 서체에 대한 NPM 패키지를 만듭니다

각 패키지는 오픈 소스 서체를 자체 호스팅하는 데 필요한 모든 fon 및 cs와 함께 제공됩니다.
작지만 늘어나는 다른 오픈 소스 글꼴 목록뿐만 아니라 모든 Google 글꼴이 추가되었습니다.

그냥 NPM 검색 에 대한 처럼 사용할 수있는 글꼴 찾아 서체-Roboto로 또는 서체 - 오픈 산세를 하고 다음과 같이 설치합니다 :typeface-<typefacename>

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

NPM - 구글 글꼴 Download-의 ERS

보다 일반적인 사용 사례의 경우, 먼저 패키지를 얻은 다음 포함 할 글꼴 이름 및 옵션을 지정하여 두 단계로 글꼴을 제공하는 여러 npm 패키지가 있습니다.

다음은 몇 가지 옵션입니다.

• Google 글꼴 웹팩 플러그인
• Google 글꼴 오프라인
• 구글 글꼴
• Google 글꼴 가져 오기

추가 자료 :

• 재료 아이콘을 오프라인으로 호스팅하는 방법은 무엇입니까?
• Electron 앱에서 오프라인 재질 아이콘 및 Roboto 글꼴 사용

기본적으로 프로젝트에 글꼴을 포함시킵니다.

@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');

Google 글꼴을 사용할 때 워크 플로는 "선택", "사용자 정의", "내장"의 3 단계로 나뉩니다. 자세히 살펴보면 "사용"페이지의 오른쪽 끝에 현재 컬렉션에있는 글꼴을 다운로드 할 수있는 작은 화살표가 있습니다.

그런 다음 시스템에 글꼴이 설치되면 font-familyCSS 지시문을 사용하여 다른 일반 글꼴처럼 사용해야합니다 .

나는 다음 duydb의 즉,이 과정을 자동화 아래의 파이썬 코드를 생성하는 대답.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

이것이 복사 붙여 넣기 사망에 도움이 되길 바랍니다.

글꼴을 다운로드하여 로컬에서 참조해야합니다.

다운로드 CSS당신이 게시 된 링크에서, 다음의 모든 다운로드 WOFF파일 및 (필요한 경우)로 변환 TTF.

그런 다음 CSS 게시 한 링크에서 글꼴을 로컬로 포함하도록 .

에서

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

에

url(/path/to/font/font.woff)

짜잔! 더해야 할 것이 있지만 위의 기본 사항입니다. 이 기사 는 조금 더 잘 설명합니다.

글꼴을 다운로드하여 폴더에서 추출하십시오. 그런 다음 해당 글꼴을 연결하십시오. 아래 코드는 제대로 작동했습니다.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}