Adding customize font to Google Script App

Question

I'm developing a web app that requires a certain type of font used by my company. Since I'm using Google Apps Script, I uploaded the font files to a google drive folder. But it's not working. In the script, the https://drive.google.com/file/d/XXX is the shareable link. I tried to use https://drive.google.com/uc?export=view&id= but it didn't work too.

I'll be very grateful if anyone can help. Thanks!

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

Update

It is as @Tanaike suggested, the right way to do it is to use this link https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key### for all the different formats of the font files. It appeared to not be working at first because I missed out two.

Here's the corrected 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;
}

Tanaike · Accepted Answer · 2022-06-12 13:06:13Z

2

I thought that in your script, it is required to modify the URL. So, how about the following URL?

From:

https://drive.google.com/file/d/XXX/###

From your this URL, I guessed that XXX might be the file ID of the file.

To:

https://drive.google.com/uc?export=download&id=###fileId###

or, if the above URL cannot be used, please use the following URL.

https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###

In this case, please use your API key. Ref
Please replace ###fileId### with your file ID.
Please replace ###your API key### with your API key.

Note:

In this modification, it supposes that your files on Google Drive have already been publicly shared. Please be careful about this.

References:

answered Jun 12, 2022 at 13:06

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

LauraEverdeen Over a year ago

Thanks for replying, but both didn't work for me. I'm not too sure about the API key. Is it right that I just have to create a project, go to credentials and select API keys? I followed these steps from Google and got a key. It still didn't work though.

Tanaike Over a year ago

@LauraEverdeen Thank you for replying. I apologize for the inconvenience. About

but both didn't work for me. I'm not too sure about the API key. Is it right that I just have to create a project, go to credentials and select API keys? I followed these steps from Google and got a key. It still didn't work though.

, in this case, when you have your API key, please use it to ###your API key### of https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###. Please replace ###your API key### with your API key, and test it again.

LauraEverdeen Over a year ago

Thanks for the suggestion. I created an API key and inserted it in https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key### but it still didn't work. I have checked the ###fileId###, and it is set at open to anyone who has the link. Any idea why the font still can't load?

Tanaike Over a year ago

@LauraEverdeen Thank you for replying. About https://www.googleapis.com/drive/v3/files/###fileId###?alt=media&key=###your API key###, for example, when you directly access your URL using your browser, what result will you obtain? Because, when an error occurs, you can see the error message by this. And, I thought that when an error occurs, you can confirm the reason for the error.

Tanaike Over a year ago

@LauraEverdeen Now, I thought I might notice the reason for your issue. This URL uses Drive API. So, for example, when Drive API is not enabled and access to your URL using browser, an error like "reason": "accessNotConfigured" occurs. In that case, please access to the URL of https://console.developers.google.com/apis/api/drive.googleapis.com/overview?project=### of "extendedHelp": "https://console.developers.google.com/apis/api/drive.googleapis.com/overview?project=###". And, enable Drive API, and test it again. If this was not the direct solution to your current issue, I apologize.

|

Collectives™ on Stack Overflow

Adding customize font to Google Script App

1 Answer 1

From:

To:

Note:

References:

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

Note:

References:

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related