Custom Font on Web remote forms

[Andreas Pfeiffer]

Hello Minh,

Yes – you can do this.

To make the font accessible in Omnis you would need to download the font and install it on your macOS if not done already.

Then in your library look at the system class #WIWFONTS, open it to modify and add a new line with your font name. For example add “Montserrat” to macOS column as well as the JavaScript column. You can also add more fonts to the JavaScript column as fallback fonts if you like.

These are the two steps to make the font available in your remote form design. You can now use this font in the $font property of your fields or in your field styles if you like. The latter one might make more sense.

But – to make the font also work on your website you would need to do additional steps:

Open the htm file that you want to use. Note for testing it will make a copy from the jstempl.htm file that is in your html folder. So make the change there and delete the htm file that it might have created with the name of your remote form.

Open this file with a text editor and have a look at this line:

 <link href="fonts/roboto-flex/roboto-flex.css" rel="stylesheet">

So you would need to add a similar line that either points to your local fonts in your html/fonts folder or you could also point to a css somewhere in the web to embed your font:

<link href="
https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">

If you want to have them locally you can create your own CSS file – I called it “montserrat.css” which has a similar content just like the sample that you see for Roboto but pointing to your own fonts.

For example it could look like this one:

@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-VariableFont_wght.ttf') ;
}

Having my own CSS file (“montserrat.css”) I had to add this line to the htm file:

<link href="fonts/montserrat/montserrat.css" rel="stylesheet">

I hope this helps.

Best regards, Andreas

• This reply was modified 8 months, 3 weeks ago by  Andreas Pfeiffer.
• This reply was modified 8 months, 3 weeks ago by  Andreas Pfeiffer.