最简单的方法-使用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;
}

这一切!

编辑:正如luckyrumo指出的那样，字体被放弃了，取而代之的是:https://github.com/fontsource/fontsource

如果您正在使用Webpack，您可能会对这个项目感兴趣:https://github.com/KyleAMathews/typefaces

例如，你想使用Roboto字体:

npm install typeface-roboto --save

然后把它导入你的应用的入口点(主js文件):

import 'typeface-roboto'

最简单的方法-使用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中，以从您的服务器提供服务。这样你就不必担心谷歌跟踪你网站的用户。然而，缺点可能会减慢你自己的发球速度。字体对资源的要求很高。我还没有在这个问题上做任何测试，不知道是否有人有类似的想法。

我写了一个bash脚本，在谷歌的服务器上使用不同的用户代理获取CSS文件，将不同的字体格式下载到本地目录，并编写包含它们的CSS文件。注意，该脚本需要Bash版本4.x。

请参阅https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/获取脚本(我在这里不复制它，所以我只需要在需要时在一个地方更新它)。

编辑:移动到https://github.com/neverpanic/google-font-download

这在法律上是允许的，只要你遵守字体许可的条款——通常是OFL。

你需要一套网页字体格式，而font Squirrel Webfont Generator可以生成这些格式。

但是OFL要求在修改字体时重命名它们，使用生成器意味着修改它们。