Using Custom Fonts in POWR Apps

While POWR apps support over 800 Google Fonts, you can also add your own custom fonts if you have the appropriate license. This allows you to maintain brand consistency and use your unique typography across all POWR apps.

🛠️ Custom fonts are available starting from the PRO plan.
View POWR Plans & Pricing

How to Add a Custom Font to a POWR App

Follow the steps below to use a custom font in your POWR app:

1. Host your custom font online

To use a custom font, it must be accessible via a direct HTTPS link. You can upload your font to your own web server, Dropbox (with public link settings), Google Cloud, or another hosting service. Make sure the link ends in a standard font file extension such as .ttf, .woff, or .otf.

Example of a valid link:
https://yourdomain.com/fonts/MyCustomFont.woff

2. Add the font using Custom CSS in POWR

1. Open your POWR app editor.

2. Go to the Design tab.

3. Scroll down and click Custom CSS (available on PRO plans and above).

4. Paste the following CSS, replacing the font URL and name:
   
   

   @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';
   }

    

💡 You can adjust the font-family name to anything you like, but it must match in both the @font-face and the general font-family line.

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

Foe amxple, if you want 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 Notes

• POWR cannot host font files directly. The font must be hosted on an external platform with a public link.

• Make sure your font file is served over HTTPS, not HTTP.

• Only use fonts you have the legal rights to embed.

• The Custom CSS feature is available on PRO plans and above.

👉 Want to unlock Custom CSS and more advanced features?
Upgrade to a PRO Plan

💡 FAQ

Can I upload a font directly into POWR?

No. POWR doesn’t support direct font uploads. Your font must be hosted externally and linked via Custom CSS.

Which font file types are supported?

We recommend using .woff or .woff2 formats, but .ttf and .otf may work depending on browser compatibility.

Can I apply a custom font to only certain parts of my app?

Yes. Instead of using *, you can target specific elements using CSS classes or tags.
Example:

.powr-button {
  font-family: 'MyCustomFont';
}

New to POWR?

POWR apps work seamlessly on platforms like Shopify, Wix, Weebly, Squarespace, and more.
🎉 Explore all POWR apps and get started for free

Important Note: 

⚠️ 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 to add JS code for you. As security is a top concern at POWR, JS scripts will be added to your app only after verification. 
👉🏻 CLICK HERE TO CONTACT SUPPORT TEAM and provide the JS code of your custom font.