Skip to main content

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.

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.

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.

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.

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


Thanks again for your answer.

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?

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


"networkAccess": {

    "allowedDomains": :

      "https://fonts.googleapis.com",

      "https://fonts.gstatic.com"

    ]

  }

I’ve been searching around for the last hour trying to get google fonts to work via @import url(). This did the trick for me. Bumping so others might find it. Thanks!

Reply


Terms & ConditionsCookie settings