其实很简单。去谷歌的网站上的字体，并添加它的链接到每页的头部，你想包括字体。

这就是我在不使用CDN的情况下获得静态部署所需的woff2文件所做的工作

临时添加cdn的css加载roboto字体到index.html，让页面加载。 从谷歌开发工具查看来源和展开fonts.googleapis.com节点，并查看css的内容?family=Roboto:300,400,500&display=交换文件并复制内容。将这些内容放在assets目录下的css文件中。

在css文件中，删除所有的希腊文，克里利克文和越南文。

看看这个css文件中类似的行:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

复制链接地址并粘贴到浏览器中，它将下载字体。把这个字体放到你的assets文件夹中，在这里重命名它，在css文件中也是如此。对其他链接也这样做，我有6个独特的woff2文件。

对于材质图标，我遵循了相同的步骤。

现在返回并注释您调用cdn的行，而不是使用您创建的新css文件。

你看过压缩文件里的How_To_Use_Webfonts.html了吗?

在阅读之后，似乎每个字体子文件夹都有一个已经创建的.css，你可以通过包括以下内容来使用:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

你真的不需要做这些。

去谷歌的网页字体页面 在右上方的搜索框中搜索Roboto 选择要使用的字体的变体 点击顶部的“选择此字体”，选择你需要的权重和字符集。

该页面将为您提供一个<link>元素，以包含在您的页面中，以及一个示例字体家族规则列表，以用于您的CSS。

以这种方式使用谷歌的字体可以保证可用性，并减少您自己服务器的带宽。

很容易

你下载的每个文件夹都有不同的roboto字体，这意味着它们是不同的字体

操作:roboto_regular_macroman

使用它们中的任何一个:

1-解压文件夹的字体你想使用

2-上传到CSS文件附近

3-现在包括在CSS文件

示例:包含名为"roboto_regular_macroman"的字体:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

注意文件的路径，这里我上传了一个名为“roboto_regular_macroman”的文件夹，与CSS所在的文件夹相同

那么你现在只需输入font-family: 'Roboto'就可以使用字体了;

用css:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

萨斯:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */