Figma plugin UI font family

Plugin and Widget API Questions
1

I am developing a plugin for Figma, and I have been trying to modify the default font family that the UI uses by default, however, any attempt to force a custom font via CSS did not work.

I am starting to wonder if this is really possible.

So for trying to change the font family, in the ui.html file, in the section, I have something like the code below. I have my font file in a folder named “fonts” inside the plugin folder.

@font-face {
      font-family: 'myExampleFont-Regular';
      src: url('./fonts/myExampleFont-Regular.otf');
      font-style: normal;
      font-weight: 400;
}

.someSpanClassElement{
      ....bla
      bla
      bla...
      font-family: 'myExampleFont-Regular';      
}

Any tips, or confirmation that changing plugin UI font-family is not possible will be much appreciated.

2

Your font must be on the Internet and be available via a link. So use Google Fonts or some other service, or upload the font to your site and link directly to the font in your CSS.

3

Thanks for your answer but this is not possible since this is a a private company-developed font…so unless Figma is able to fetch it from a private company server…getting it from the internet is not an option.

Still, it should be able to fetch if from local, feels a bit weird if not.

4

Unfortunately, there is no other way. Plugins can only contain these 3 files:

  • manifest.json
  • code.js
  • ui.html

Images, fonts, scripts and other resources can only be connected by URL.

5

Good to know, very limited functionality from a developer point of view, but still good to know.

Thanks again for your answer.

6

I tried using Google Fonts and that didn’t work either. I get the following error.

Refused to load the stylesheet ‘https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;600&display=swap’ because it violates the following Content Security Policy directive: “style-src ‘unsafe-inline’ ‘unsafe-eval’ data: blob:”. Note that ‘style-src-elem’ was not explicitly set, so ‘style-src’ is used as a fallback.

Any suggestions?

7
8

I’ve added these two domains into the manifest.json and it worked:

"networkAccess": {
    "allowedDomains": [
      "https://fonts.googleapis.com",
      "https://fonts.gstatic.com"
    ]
  }