This documentation is for Live Forms 7.4 Not for you? Earlier documentation is available too.

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Upload custom JavaScript to dynamically load custom fonts to each application or to your tenant. The custom JavaScript will vary depending on the fonts that you are using. Contact the vendor for the correct JavaScript for the custom font(s) that you are using.

    Expand
    titleClick here for an example of custom JavaScript when added to the tenant that will load the Google Roboto condensed and the trial Century Schoolbook Roman fonts.
    Code Block
    // frevvo custom JavaScript
    
    var TenantCustomEventHandlers = {
    	fontsLoaded: false,
    	setup: function (el) {
    		if (!this.fontsLoaded) {
    
    			// Load Roboto Condensed font
    			this.addStyleSheetToDoc("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");			
    
    			// Load trial Century Schoolbook.  The following js was generated by myfonts using the
    			// free trial option.  With this you can put markup in message controls like the following:
    			// <h1 style="font-family: 'Century Schoolbook Roman';">Header looks great</h1>
    
    			(function() {
    		        var trial = document.createElement('script');
    		        trial.type = 'text/javascript';
    		        trial.async = true;
    		        trial.src = 'https://easy.myfonts.net/v2/js?sid=42(font-family=Century+Schoolbook+Roman)&sid=44(font-family=Century+Schoolbook+Bold)&
                    key=CwN4ZsXpUs';
    		        var head = document.getElementsByTagName("head")[0];
    		        head.appendChild(trial);
    		    })();
    		    this.fontsLoaded = true;
    		}
    	},
    	addStyleSheetToDoc: function (href) {
    				
    		// don't load it again if it's already there
    		var ss = document.styleSheets;
    	    for (var i = 0, max = ss.length; i < max; i++) {
    	        if (ss[i].href == href)
    	            return;
    	    }
    				
    		if (document.createStyleSheet) {
    			document.createStyleSheet(href);
    		} else {
    			var l = document.createElement("link");
    			l.rel = "stylesheet";
    			l.href = href;
    			document.getElementsByTagName("head")[0].appendChild(l);
    		}
    	}
    }
  2. Drag and drop a Message Control into your form/flow.
  3. Add the markup and text to the Message property. Since all fonts are different, you may need to contact the vendor for instructions to include the font in your HTML

    Code Block
    <h1 style="font-family: 'Century Schoolbook Roman';">h1-Century Schoolbook Roman</h1>
    <h2 style="font-family:'Roboto', sans-serif">h2 - Roboto</h2>
  4. Save and test your form/flow.

...