最简单的方法-使用google-webfonts-helper

假设我们想要托管字体Red Rose:

Open google-webfonts-helper and filter for the required font on top left (type Red Rose and enter..) Choose from the charsets (default is latin; select others like latin-ext if you want extended support) Select the styles (deafult is regular) From the Copy CSS tab Select Modern Browser if you wish to support only modern browsers (woff2, woff) Select Best Support if you wish to support all browsers (I chose this - woff2, woff,ttf,svg,eot) In case your font files do not reside in ../fonts/ path, you can edit it to represent your actual path (for me it was ../assets/fonts/) Copy the CSS and keep for future use Download the zip file named red-rose-v1-latin-ext_latin; unzip it and place all fonts directly into your assets/fonts directory (based on what you gave earlier) In your stylesheet where you wish to embed, paste the copied CSS. It will look like the below if you chose these options

/* red-rose-regular - latin-ext_latin */
@font-face {
  font-family: 'Red Rose';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Red Rose Regular'), local('RedRose-Regular'),
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.svg#RedRose') format('svg'); /* Legacy iOS */
}

/* Red Rose will now be available for use in your stylesheet, provide this font */

:root {
  font-family: 'Red Rose', cursive, sans-serif;
}

这一切!

很好的解决方案是google-webfonts-helper ．

它允许你选择多个字体变体，这节省了很多时间。

CSS文件的内容(来自include URL)取决于我从什么浏览器查看它。例如，当使用Chrome浏览器浏览http://fonts.googleapis.com/css?family=Open+Sans时，该文件只包含WOFF链接。使用Internet Explorer(如下)，它包括EOT和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');
}

当你拥有自己的网页字体时，你需要正确地链接到每种字体类型，处理遗留的浏览器错误等。当您使用谷歌Web Fonts(由谷歌托管)时，谷歌自动链接到该浏览器的正确字体类型。

最简单的方法-使用google-webfonts-helper

假设我们想要托管字体Red Rose:

Open google-webfonts-helper and filter for the required font on top left (type Red Rose and enter..) Choose from the charsets (default is latin; select others like latin-ext if you want extended support) Select the styles (deafult is regular) From the Copy CSS tab Select Modern Browser if you wish to support only modern browsers (woff2, woff) Select Best Support if you wish to support all browsers (I chose this - woff2, woff,ttf,svg,eot) In case your font files do not reside in ../fonts/ path, you can edit it to represent your actual path (for me it was ../assets/fonts/) Copy the CSS and keep for future use Download the zip file named red-rose-v1-latin-ext_latin; unzip it and place all fonts directly into your assets/fonts directory (based on what you gave earlier) In your stylesheet where you wish to embed, paste the copied CSS. It will look like the below if you chose these options

/* red-rose-regular - latin-ext_latin */
@font-face {
  font-family: 'Red Rose';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Red Rose Regular'), local('RedRose-Regular'),
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.svg#RedRose') format('svg'); /* Legacy iOS */
}

/* Red Rose will now be available for use in your stylesheet, provide this font */

:root {
  font-family: 'Red Rose', cursive, sans-serif;
}

这一切!

实际上，您可以直接从谷歌下载所有字体格式变体，并将它们包含在您的css中，以从您的服务器提供服务。这样你就不必担心谷歌跟踪你网站的用户。然而，缺点可能会减慢你自己的发球速度。字体对资源的要求很高。我还没有在这个问题上做任何测试，不知道是否有人有类似的想法。

请记住，我的回答已经过时了很多。

下面还有一些技术上更复杂的答案，例如:

Neverpanic/google-font-download google-webfont-helper 本地字体

所以，不要因为这是目前公认的答案，就以为这是最好的答案。

你现在也可以下载谷歌的整个字体集通过github在他们的谷歌/字体资源库。它们还提供字体的约420MB压缩快照。

You first download your font selection as a zipped package, providing you with a bunch of true type fonts. Copy them somewhere public, somewhere you can link to from your css.

On the google webfont download page, you'll find a include link like so:

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

It links to a CSS defining the fonts via a bunch of @font-face defintions.

Open it in a browser to copy and paste them into your own CSS and modify the urls to include the right font file and format types.

So this:

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

becomes this:

    /* 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');
    }

As you can see, a downside of hosting the fonts on your own system this way is, that you restrict yourself to the true type format, whilst the google webfont service determines by the accessing device which formats will be transmitted.

Furthermore, I had to add a .htaccess file to my the directory holding the fonts containing mime types to avoid errors from popping up in Chrome Dev Tools.

For this solution, only true type is needed, but defining more does not hurt when you want to include different fonts as well, like font-awesome.

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