How to change font in UI Builder

howto cookbook
1

Changing fonts it’s easy and I will help you with that.

There are two primary ways to include them.

  • with Google Fonts
  • using fonts files

Google Fonts

  1. Go to Google Fonts site
  2. Choose a font
  3. Use code from the right side(example below) in your extension.
    image

Font Files

  1. Find and download font.
  2. Upload it to

Root / ui-builder / containers / <container-name> / styles

  1. In extension write this:
@font-face {
  font-family: "FontName";
  src: url("styles/FontName.woff2");
}

That’s all. I hope it will be useful for you!
Let me know if something is still unclear.

Example of using:

span {
  font-family: "FontName"; 
}

image

Additional information:
@font-face
font-family
Google Fonts Guides

1 Like