I appreciate that CSS allows you to use fonts that were not previously on the web-safe list, I'm not sure if NIntex deals with that as well. May need a Nintexpert (I think I just made that up myself) to comment on that. If it does, then I'd have to presume that the form accesses the location of the font using the credentials of the person opening the form? Again, need an expert to help with that.

I'd be interested to know the answer. It might be one for the support team to advise you on.

Hello Chris – Your syntax is correct! What you're likely running into is an issue with specificity:

Specificity - CSS | MDN

The web browser is going to apply CSS property values based on what it sees as most relevant to an element. You likely either need to be more specific or need to add an !important tag to your property to override that determination.

I've recently tested the below to be working (8 bit looking Google font) inside Nintex Forms for SharePoint 2013 (on-premise).

@font-face {

    font-family: 'Press Start 2P', cursive;

    src: url(https://fonts.googleapis.com/css?family=Press+Start+2P);

}

body { font-family: 'Press Start 2P', cursive; }

One thing I have noticed, is live forms will ignore Google fonts. I'm not sure why this is the case but I'm seen similar issues with background images in the past.

Thanks very much for your reply Patrick.

I made progress by creating a label and editing the HTML to force it to use the font family.  It worked fine for the font you supplied but not for my custom one.  When I render in Nintex live it uses https and guess what, where my fonts are stored is just normal http.  After I've told the browser to accept all content, it renders fine.

Of course I don't want the end user to even see that message so my next challenge is hosting the font file somewhere so we don't get this message.

Cheers,

Chris

Thanks for the additional info Ben! I was actually working through a very similar problem and came to the community looking for answers (finding questions instead). :-P

Like you mentioned, I was unsuccessful in finding a way to leverage my Google Font once published to live forms. Because my form had very unique styling requirements, I ended up using some custom background images. However, I would have really preferred to leverage labels so form validation could be implemented effectively.

OK after all that rigmarole, it turns out the only thing that I had done incorrectly was trying to access my font unencrypted i.e. using http when Nintex on-prem and via Live uses https.  Once I reference the font file using https everything works.  I don't need to use the !important tag or do any fancy html.

So for those who are wanting to use custom fonts in Nintex forms, here's how you do it:

• Have a font file hosted somewhere where people can access it.  If you're using Nintex live then you'll want to make sure this file is available to public users
• When you have the Nintex Forms designer open, go to Settings | Custom CSS and scroll to the bottom of what's already there
• Create a font name by entering the following code

@font-face {

    font-family: theNameOfYourFont;

    src: url(https://urlToWhereTheFontIsStored.woff);

}

• Make sure that you use https not http!!  I've also read some commentary that suggest all lower case characters should be used for the file name.  Mixed case didn't affect my results but that's what I read.
• Create a css class by entering the following code

.theNameOfYourClass {

    font-family: theNameOfYourFont;

}

• Save that settings screen
• Go to any control on your form and add the class name that you just made to it.  The easiest place to to this is by click on the control and adding your class to the css box in the ribbon.  If your field references other classes (as per the default) this is OK.  Just add it to the end.

That's it!  Now you can use custom fonts wherever you please.

Hey Patrick,

I was able to get your google font going, even with Live.  Although I notice the url you provided just linked to a different file.  So I referenced that file directly: https://fonts.gstatic.com/s/pressstart2p/v4/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff

Hope that helps!

Cheers,

Chris

I am having difficulty getting custom fonts to print to pdf. I have added:

@media print
{

@font-face {
font-family: frenchscript;
src: url(sourcetoFrenchScript);
}
.Signature{
font-family: frenchscript;
}
}

The same commands work fine when called outside of the @media print command to show the font in the browser. Any ideas?

Did you ever get any information on this as I'm having the same issue.

it works with imported google fonts but not with own hosted.