[fonts] 내 서버에서 Google 웹 글꼴을 호스팅하는 방법은 무엇입니까?

내 답변이 오래되었다는 것을 명심하십시오.

아래에 기술적으로 더 정교한 다른 답변이 있습니다.

• neverpanic / google-font-download
• google-webfont-helper
• 지역 글꼴

이것이 현재 허용되는 답변이라는 사실이 이것이 여전히 최고라는 인상을주지 않도록하십시오.

또한 github의 Google / font 저장소 에서 Google의 전체 글꼴 세트를 다운로드 할 수도 있습니다 . 또한 글꼴 의 ~ 420MB zip 스냅 샷 도 제공합니다 .

먼저 글꼴 선택을 압축 패키지로 다운로드하여 다양한 트루 타입 글꼴을 제공합니다. CSS에서 링크 할 수있는 공용 위치에 복사하십시오.

Google 웹 폰트 다운로드 페이지에 다음과 같은 포함 링크가 있습니다.

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

여러 정의를 통해 글꼴을 정의하는 CSS에 연결됩니다 @font-face.

브라우저에서 파일을 복사하여 자신의 CSS에 붙여넣고 올바른 글꼴 파일 및 형식 유형을 포함하도록 URL을 수정하십시오.

그래서 이거:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

이된다 :

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

보시다시피,이 방법으로 자신의 시스템에서 글꼴을 호스팅하는 단점은 Google 웹 글꼴 서비스가 액세스하는 장치가 어떤 형식을 전송할지 결정하는 동안 실제 유형 형식으로 자신을 제한한다는 것입니다.

또한 .htaccessChrome 개발자 도구에서 오류가 발생하지 않도록 mime 유형이 포함 된 글꼴이 들어있는 디렉토리에 파일 을 추가 해야했습니다.

이 솔루션의 경우 진정한 유형 만 필요하지만 더 많은 것을 정의해도 다른 글꼴을 포함하려는 경우에도 영향을 미치지 않습니다 font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

답변

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}