Skip to main content
Question

Figma plugin UI font family

  • May 24, 2022
  • 8 replies
  • 2239 views
Pedro8

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.

This topic has been closed for replies.

8 replies

tank666
  • tank666
  • 4873 replies
  • May 24, 2022

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Pedro8
  • Pedro8
  • Author
  • 9 replies
  • May 24, 2022

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.

tank666
  • tank666
  • 4873 replies
  • May 24, 2022

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Pedro8
  • Pedro8
  • Author
  • 9 replies
  • May 24, 2022

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

Thanks again for your answer.

Corey_O_Brien
  • Corey_O_Brien
  • Active Member
  • 65 replies
  • November 6, 2023

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?

tank666
  • tank666
  • 4873 replies
  • December 24, 2023
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
resul_celik
  • resul_celik
  • New Member
  • 2 replies
  • January 4, 2024

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

"networkAccess": {
    "allowedDomains": [
      "https://fonts.googleapis.com",
      "https://fonts.gstatic.com"
    ]
  }
noahidavis
  • noahidavis
  • New Member
  • 1 reply
  • August 28, 2024

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!

Terms & ConditionsCookie settingsAccessibility statement