CODEWITHSUNDEEP
google-apps-scriptgoogle-sheetsadd-ongoogle-apps-marketplacewoff
Shiv Yadav
Shiv Yadav

Reputation: 311

How to use woff file for font in Google App Script

I want to use the woff file in my Google App Script project. I'm not getting how to upload a woff file in the Google App script. because there are only two file options: one is HTML and the second is script. I want to use the woff file in my project with font face CSS.

Can anyone guide me on this?

Upvotes: 0

Views: 241

Answers (1)

SputnikDrunk2
SputnikDrunk2

Reputation: 4048

SUGGESTION

NOTE: This sample is intended to serve as a starting point or reference for your project. It's important to note that the community members do not provide coding services.

As per the existing post, a woof file can also be used in the same method. I conducted a quick test for your reference, as shown below.

Essentially, all you need to do is convert your woof file into the base64 format. You can do a Google search on several online tools for this, such as this sample resource or this.

Demo

  1. Say I want to use this woof file:

enter image description here

  1. On my Google Apps Script html (Index.html) file's style tag, I have pasted the converted woof file to base64 @font-face declaration as seen below.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <style>
    @font-face {
      font-family: "BigParty4Blue";
      /* Add other properties here, as needed. For example: */
      /*
      font-weight: 100 900;
      font-style: normal italic;
      */
      src: url(data:font/woff;base64,<THE_CONVERTED_BASE64_DATA>);
    }
  </style>
</head>

<body>
  <h1 style="font-family: 'BigParty4Blue', normal italic;  font-size: 67px;">Hello, woff test</h1>
</body>

</html>

  1. Deployed & tested the html as a web app. You may also review the actual test here.

enter image description here

Reference

Upvotes: 0

Related Questions