Google Apps Script 引入Google Drive自定义字体失效解决方案

问题描述 #

开发Web应用需使用公司指定专用字体，基于Google Apps Script开发时，已将字体文件上传至Google Drive文件夹，但字体始终无法正常加载。
先后尝试两种链接形式均未生效：

• https://drive.google.com/file/d/XXX 形式的文件可分享链接
• https://drive.google.com/uc?export=view&id= 形式的导出直链

初始编写的CSS代码如下：

@font-face {
    font-family: 'specials';
    src: url('https://drive.google.com/file/d/XXX/specials.eot');
    src: url('https://drive.google.com/file/d/XXX/specials.eot') format("embedded-opentype"),
      url("https://drive.google.com/file/d/XXX/specials.otf") format("opentype"),
      url('https://drive.google.com/file/d/XXX/specials.woff') format("woff"),
      url('https://drive.google.com/file/d/XXX/specials.woff2') format("woff2"),
      url('https://drive.google.com/file/d/XXX/specials.ttf') format("truetype"),
      url('https://drive.google.com/file/d/XXX/specials.svg') format("svg"); 
    font-weight: normal;
    font-style: normal;
}
h1{
  font-family: 'specials', Georgia,'Times New Roman', Times, serif;
}

解决方法 #

所有格式的字体文件都需要使用Google Drive API的媒体直链格式引用，链接格式为：
https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###
其中###fileId###替换为对应字体文件的Drive文件ID，###your API key###替换为自己的Google Cloud API密钥。

之前按该格式配置后未生效，是因为遗漏了两种字体格式的引用配置，必须为所有引用的字体格式都替换为对应直链才能正常加载。

修正后的可正常运行的CSS代码如下：

@font-face {
    font-family: 'specials';
    src: url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###');
    src: url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###') format("embedded-opentype"),
      url("https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###") format("opentype"),
      url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###') format("woff"),
      url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###') format("woff2"),
      url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###') format("truetype"),
      url('https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###') format("svg"); 
    font-weight: normal;
    font-style: normal;
}

内容的提问来源于stack exchange，提问作者LauraEverdeen