css google font 느린로드 시간을 피하기 위해 CSS에 다운로드하고 임베딩하는 방법

Question

yaml CSS 프레임 워크를 사용하고 있습니다. 매번 내 웹 페이지에 액세스 할 때 내 페이지가 Google 글꼴을 다운로드하려고한다는 다음 메시지가 나타납니다.

이 페이지는 인트라넷 페이지이며, 인터넷 그래서 나는 이런 일이 발생을 중지 찾고 매우 느릴 수 있습니다. 나는 내가해야 할 일은 폰트를 다운로드하고 그것을 나의 CSS의 어딘가에 넣는 것이다. 누구든지이 작업을 수행하는 방법을 안내하고 Google 글꼴을 어디서 얻을 수 있습니까? TTF는 당신과 함께 확인하는 경우 http://www.fontsquirrel.com/fonts/Droid-Sans :

감사

Answer 1

글꼴을 찾아 볼 수있는 좋은 장소는 http://www.google.com/fonts

은 아마 당신이 여기에서 드로이드 산세를 다운로드 할 수 있습니다. 당신이 세계로 글꼴을 완 경우

글꼴에 관해서는, 당신은 간단하게 수행 할 수 있습니다

@font-face { 
    font-family: DroidSans; 
    src: url('location/DroidSans.ttf'), 
     url('location/DroidSans.eot'); /* IE9 */ 
} 

html * { 
    font-family: DroidSans; 
} 

는 IE9를 지원하려면 - 나는 온라인 컨버터를 EOT까지 TTF 많이 있다고 생각합니다.

Answer 2

이것을 CSS 파일에 넣으십시오. 분명히, 사용하는 것과 일치하도록 파일의 이름을 변경하십시오.

/* Webfont: Open Sans Regular */ 
@font-face { 
    font-family: 'open_sansregular'; 
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot'); 
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('path/to/fonts/OpenSans-Regular-webfont.woff') format('woff'), 
     url('path/to/fonts/OpenSans-Regular-webfont.ttf') format('truetype'), 
     url('path/to/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

p { 
    font-family:'open_sansregular', Verdana, Arial, sans; 
} 

인터넷을 통해 글꼴을 다운로드 할 수 있지만 라이센스를 구입하지 않으면 일반인에게 공개 할 수 있습니다.

Answer 3

Google 글꼴에서 직접 글꼴 파일을 다운로드 할 수 있습니다.

그런 다음 서버에 파일을 호스팅하십시오.

그런 다음 @font-face을 사용하여 페이지로 가져 오십시오.

는 그런 다음 CSS에서 다른 글꼴처럼 사용 : 만 TTF를 참조 할 때 font-family: 'Droid Sans'

Answer 4

하는 것은주의하십시오. 대부분의 브라우저를 다루기 위해서는 TTF, EOT, WOFF, WOFF2 및 SVG와 같은 5 가지 글꼴 형식을 참조해야합니다. Google 글꼴 웹 사이트에서 TTF 만 다운로드 할 수 있습니다.

Google 글꼴 사이트의 CSS 파일을 포함하면 Google은 사용자 에이전트 감지를 처리하고 올바른 글꼴 형식의 CSS 규칙을 제공합니다. 모든 글꼴 형식을 다운로드하려면 다른 브라우저를 사용해야하거나 대부분의 브라우저에서 할 수있는 사용자 에이전트를 위조해야합니다.

http://www.localfont.com/과 같은 편리한 도구로 문제를 해결할 수 있습니다. X-Browser CSS 정의와 함께 가능한 모든 글꼴 형식을 다운로드 할 수 있습니다.