Using Custom Fonts in POWR Apps

POWR apps utilize Google Fonts for the widest availability and compatibility. However, if your business uses a custom font, it is possible to use this in your apps with Custom CSS (see pricing for feature availability on each plan). 

To use a custom font, you'll need to have a license or permission to use the font, and you will need to have a URL to where the font is hosted. 

Copy the following snippet, and using the font name and hosted url update the portions in pink. Then paste this into the Custom CSS field in your POWR App's settings. 
You would be able to reach CSS settings by going to your App's settings> Custom CSS/JS.

@font-face {
  font-family: 'Font Name';
  font-style: normal;
  font-weight: 400;
  src: local('Font Name'), url('https://hostingurl.font-name.woff') format('woff');
}
#appView *:not(i) {
 font-family: 'Font Name';
}

Visit this link to view available Google Fonts: https://fonts.google.com/ 

Please visit this link to learn about using Custom CSS on the POWR plugins:

Using custom CSS and Javascript in POWR Apps

CSS code to add the Bebas Neue font:

/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Important Note: Access to the Custom CSS/JS section of the POWR plugin is not available for free users.

⚠️ As of October 2021 for security reasons, POWR editor doesn't support the Custom JS
field. If you would like to add any JS customization, kindly contact the Support Team at support@powr.io. As security is a top concern at POWR, JS scripts will be added to your app only after verification.