Can we use Custom Fonts?

Support
1

Is there a way to load in custom fonts to fmBF? My client wants to use Korolev, note this is not a Google Font, it is an adobe font.

2

You sure can! Anywhere that you can find web fonts—whether it’s from Adobe, Google, or elsewhere—will provide you with an embed code that you have to inject into the header of your website. In BetterForms, you can add that embed code to your site using the DOM Header insertion section of the site settings > environment tab.

Once the font is installed there, it’s up to you to change the CSS to start using that font

1 Like
3

Awesome! So I need to find a web version of it? I have a zip file from the client, or can I upload it to the web and then use it?

4

Web fonts usually have a different license, and they’re not the same font files that you probably have now. I can see that the font you’re looking for is on Adobe Fonts, but that does require a subscription to use it.

5

Ok cool, I will request this from the client and revert! Thank you!

6

Quick question on this, I have the webfoot css files for the font, do I past into the DOM the entire font css and the style css?

7

You’ll want to make sure to provide a link to the font CSS in your DOM Header Insertions. If you don’t have a link (just the actual CSS files), upload to a host somewhere, or use the Assets tab in FMBetterForms to upload files.

8

Is it not better to have it in the app as opposed to a link to a server somewhere. If the other server goes down or loads slows, would this affect performance?

9

No, using a CDN is really the best idea. Their whole purpose is to be fast, responsive, and have backups for those kinds of files so you never really hear about downtime ever. This is just how the web works :slight_smile:

Another benefit of CDNs is that they allow separate cacheing of their files. Your font file doesn’t change, but your app will. If the font is loaded separate from the app, then your app changes, the browser will not re-download the font (just your app). So in many cases this can actually result in better performance.

1 Like
10

I added the Teko Google font to the DOM and it’s not working in my form. I followed examples on the web.
This is what’s in my DOM:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Teko">

This is what’s in my form:

    <p class="font-family: 'Teko', serif;">TEXT</p>

Any ideas?

11

You’ve defined a style inside the class attribute. Either change that from class to style or define a class with that style in your site’s CSS

1 Like
12

Thank you so much. I learned the lesson hopefully.