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.

...

Follow these steps to use custom fonts via HTML markup:

  1. Upload custom JavaScript to dynamically load custom fonts to each application or on the tenant level so that it will be available to all designers. The custom JavaScript will vary depending on the fonts that you are using. You may have to contact the vendor for specific instructions when writing the script.

    Expand
    titleClick here for an example of custom JavaScript when added to an application that will load the Google Roboto condensed font and the trial Century Schoolbook Roman font to Live Forms
    Code Block
    // frevvo custom JavaScript
    
    var CustomEventHandlers = {
    	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.

...