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 an application the tenant that will load the Google Roboto condensed font and the trial Century Schoolbook Roman fonts.
    Code Block
    // frevvo custom JavaScript
    
    var CustomEventHandlersTenantCustomEventHandlers = {
    	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.

...

  1. Upload custom JavaScript to dynamically load custom fonts to each application or on the tenant level. The custom fonts must be available to the HTML document containing the form. Typically custom fonts can be added dynamically with JavaScript.  The exact JavaScript may vary based on the font. 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 that will load the Google Roboto condensed font and the trial Century Schoolbook Roman fonts when added to an applicationthe tenant.
    Code Block
    // frevvo custom JavaScript
    
    var CustomEventHandlersTenantCustomEventHandlers = {
    	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. Stop
    Frevvoproduct
    .
  3. Navigate to <frevvo-home>\tomcat\conf.
  4. Edit the frevvo-config.properties file
  5. Add the frevvo.message.rte.extra.fonts property with a value listing the extra fonts in this format:
    1. Each font in the list is delimited by a semi-colon.
    2. The font itself must be identified by its name in single quotes. Prefix the font name with an optional display name, if desired. Separate the display name from the font name by a forward slash. The display name is used in the font drop down of the Rich Text Editor. If the display name is not provided, the actual font name will be used. 

      Code Block
      titleExample of the Configuration property for Custom Fonts
      frevvo.message.rte.extra.fonts=Century Schoolbook Roman/'Century Schoolbook Roman';Roboto/'Roboto', sans-serif


    3. The font names and font type (sans-serif) on the right side of the equal sign in the example above came from the vendor. Contact the font vendor for the correct information for the custom font(s) that you are using.

  6. Save the file.
  7. Restart
    Frevvoproduct
    .
  8. Login as a designer user.
  9. Create/Edit an Application
  10. Create/Edit a Form
  11. Drag and Drop a Message control into your form.
  12. Enable the Rich Text Editor of the Message control by sliding the Rich Text toggle to the right.
  13. Click to show the Rich Text Editor menu
  14. Click on the Font dropdown in the toolbar.
  15. Custom fonts are appended to the standard supported fonts.

...